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

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

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

Псевдоклас :first-of-type без зазначення селектора вибере перші елементи кожного типу (<h1>, <p>, <address>, <time>) і встановить для них червоний колір тексту.

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

Під час додавання селектора до :first-of-type спершу обираються зазначені елементи, потім із них береться перший елемент. Наявність інших елементів (<h1> і <address>) та їхній порядок не враховуються.

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

Тут буде обрано перший абзац всередині <article> і виділено червоним кольором.

Синтаксис

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

Приклад

Браузери