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

Пример

Браузеры