CSS :only-child — єдина дитина свого батька
Селектор :only-child обирає елемент, який є єдиним нащадком батька.
Цей селектор аналогічний настопній комбінації селекторів :first-child:last-child.
Загальний опис
автор: NagarD
Синтаксис
:only-child {
css declarations;
}Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 2 | 1.5 | 3.1 | 9.5 | 12 | 9 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 2 |
Приклади
+ запропонувати свій приклад у пісочниці
Список з одного пункту виглядає інакше — правило спрацьовує лише тоді, коли сусідів немає.
HTML
<ul class="tags"><li>єдиний</li></ul>
<ul class="tags"><li>перший</li><li>другий</li></ul>CSS
.tags {
list-style: none;
display: flex;
gap: .5rem;
padding: 0;
margin-bottom: 1rem;
font: 15px system-ui, sans-serif;
}
.tags li {
padding: .35rem .7rem;
border-radius: 999px;
background: #e2e8f0;
}
/* єдиний пункт — інший вигляд */
.tags li:only-child {
background: #2563eb;
color: #fff;
}Червоним стає лише абзац, у якого немає жодних братів — у другому контейнері їх двоє, тож там правило мовчить.
HTML
<div>
<p>Єдина дитина свого батька — червоний.</p>
</div>
<div>
<p>Тут дітей двоє.</p>
<p>Тож жоден не червоний.</p>
</div>CSS
p:only-child {
background: #ff0000;
}Коментарі
Коментарів ще немає — будьте першим!