: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 |
Совместимость с браузерами
Loading…