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

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

Псевдокласс :only-of-type применяется к дочернему элементу указанного типа, только если он единственный у родителя.

В качестве примера рассмотрим следующий код 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-of-type без указания селектора выберет все единственные элементы каждого типа внутри <article> и установит для них красный цвет текста. Здесь единственными являются элементы <h1>, <address> и <time>.

article :only-of-type { color: red; }

При добавлении селектора к :only-of-type сперва рассматривается указанный элемент, затем проверяется, является ли он единственным. Здесь красным цветом будет выделен заголовок, поскольку <h1> только один.

article h1:only-of-type { color: red; }

Если вместо h1 использовать селектор p, то ничего выбрано не будет, поскольку внутри <article> встречается несколько абзацев и элемент <p> не является единственным.

article p:only-of-type { color: red; }

Синтаксис

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

Пример

В примере псевдокласс :only-of-type применяется к селектору img, в правилах стиля которого задаётся рамка красного цвета для картинок. Сама рамка добавляется к изображениям, которые у своих родителей (в данном случае это <p>) встречаются только один раз. В первой строке повторяется два изображения, поэтому псевдокласс не действует, во второй строке вставлено одно изображение, для него :only-of-type и работает.

Браузеры