Вибірка єдиного нащадка в CSS

Вивчаємо псевдоклас :only-child, який дозволяє вибирати елементи, що є єдиним дочірнім елементом свого батька.

Псевдоклас :only-child вибирає елемент тільки у тому випадку, якщо він є єдиним дочірнім елементом свого батьківського елемента.

Якщо всередині батьківського елемента знаходиться декілька дочірніх елементів, :only-child не спрацює.

HTML/CSS приклад

<div>
  <p>Єдиний абзац</p>
</div>

<div>
  <p>Перший абзац</p>
  <p>Другий абзац</p>
</div>

p:only-child {
  color: red;
}

У результаті червоним стане тільки перший абзац, тому що він є єдиним дочірнім елементом свого div.

.block p:only-child {
  font-size: 30px;
}

Такий селектор вибере тільки ті абзаци всередині .block, які є єдиними дочірніми елементами.

❗ Важливо:

:only-child працює тільки для елементів без сусідів. Якщо у батька є хоча б два дочірні елементи — вибір не відбудеться.

📌 Завдання:

💡 Показати підказку

Використовуйте псевдоклас :only-child. Він вибирає елементи без братів і сестер.

✅ Показати відповідь

p:only-child {
  color: red;
}