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

Псевдоклас :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; }

Синтаксис

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

Примітка

У Safari до версії 3.0 псевдоклас :only-child сприймається як :first-child.

Браузери