Псевдоклас CSS :only-child

• Зміст
  • Синтаксис
  • Примітка
  • Специфікація
  • Браузери

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

Як приклад розглянемо наступний код HTML:

<article> <h1>Роль цитокінів при дорсалгії</h1> <p>Автор: Гордон Фрімен, канд. фіз.-мат. наук</p> <p>Зміст статті</p> <address>Пошта: freemen@blackmesa.com</address> <p>Опубліковано: <time datetime="2018-11-27">27 листопада 2018</time></p>
</article>

Псевдоклас :only-child без вказівки селектора вибере всі єдині елементи та встановить для них червоний колір тексту. Тут єдиним буде елемент <time>, оскільки він є єдиним дочірнім елементом свого батька <p>.

article :only-child { color: red; }

При додаванні селектора до :only-child спершу розглядаються всі єдині дочірні елементи у своїх батьків, потім перевіряється, чи належать вони до зазначеного типу. Якщо ці дві умови співпадають (в даному випадку єдиний елемент та елемент <h1>), тоді заголовок пофарбується червоним кольором. Оскільки <h1> не є єдиним і крім нього є інші елементи (<p> та <address>), то нічого обрано не буде.

article h1:only-child { color: red; }

Замість :only-child можна використовувати комбінації :first-child: last-child або :nth-child(1):nth-last-child(1).

<code><i>Селектор</i>:only-child { ... }