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

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

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

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

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

При добавлении селектора к :last-of-type сперва выбираются указанные элементы, затем из них берётся последний элемент. Наличие других элементов (<h1> и <address>) и их порядок не учитываются.

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

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

Синтаксис

Селектор:last-of-type { ... }

Пример

Браузеры