:only-child
Класс псевдоселектора :only-child CSS псевдокласса представляет элемент без каких-либо соседних элементов. Это то же самое, что и :first-child:last-child или :nth-child(1):nth-last-child(1), но со меньшей специфичностью.
Попробуйте
Синтаксис
:only-child {
/* ... */
}
Примеры
Базовый пример
HTML
<div>
<div>I am an only child.</div>
</div>
<div>
<div>I am the 1st sibling.</div>
<div>I am the 2nd sibling.</div>
<div>
I am the 3rd sibling,
<div>but this is an only child.</div>
</div>
</div>
CSS
div:only-child {
color: red;
}
div {
display: inline-block;
margin: 6px;
outline: 1px solid;
}
Результат
Пример со списком
HTML
<ol>
<li>
First
<ul>
<li>This list has just one element.</li>
</ul>
</li>
<li>
Second
<ul>
<li>This list has three elements.</li>
<li>This list has three elements.</li>
<li>This list has three elements.</li>
</ul>
</li>
</ol>
CSS
li li {
list-style-type: disc;
}
li:only-child {
color: red;
list-style-type: square;
}
Результат
Спецификации
| Спецификация |
|---|
| Уровни селекторов 4 # only-child-pseudo |
Совместимость с браузерами
| Рабочие столы | Мобильные устройства | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Opera | Safari | Chrome Android | Firefox для Android | Opera Android | Safari на iOS | Samsung Internet | WebView Android | |
:only-child |
2 | 12 | 1.5 | 9.5 | 3.1 | 18 | 4 | 10.1 | 2 | 1.0 | ≤37 |
no_parent_required |
57 | 79 | 52 | 44 | Нет | 57 | 52 | 43 | Нет | 7.0 | 57 |
См. также
© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/:only-child