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

Браузеры