:only-child
Описание
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 |
Совместимость с браузерами
BCD tables only load in the browser