Псевдоклас :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 і працює.

Браузери