:only-child
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since июль 2015 г..
* Some parts of this feature may have varying levels of support.
Описание
CSS псевдокласс :only-child находит любой элемент, являющийся единственным потомком родителя. Это тоже, что и :first-child:last-child или :nth-child(1):nth-last-child(1), но с меньшей специфичностью.
Синтаксис
parent child:only-child { property: value; } Примеры
Простой пример
css
span:only-child { color: red; } html
<div> <span>Этот span единственный ребёнок своего папы:(</span> </div> <div> <span>Этот span один из потомков родителя</span> <span>Этот span один из детей отца</span> </div> Результат
Пример со списком
css
li li { list-style-type: disc; } li:only-child { color: #6699ff; font-style: italic; list-style-type: square; } html
<ol> <li> Первый <ul> <li>Это единственный ребёнок</li> </ul> </li> <li> Второй <ul> <li>Этот список с двумя элементами</li> <li>Этот список с двумя элементами</li> </ul> </li> <li> Третий <ul> <li>Этот список с тремя элементами</li> <li>Этот список с тремя элементами</li> <li>Этот список с тремя элементами</li> </ul> </li> <ol></ol> </ol> Результат
Спецификации
| Specification |
|---|
| Selectors Level 4 # only-child-pseudo |