: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 July 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 |
Совместимость с браузерами
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
:only-child | ||||||||||||
Matches elements with no parent |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- No support
- No support
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.