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

Обновлено: 20.09.2022

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

Псевдокласс :last-child задаёт стиль последнего элемента в группе братских элементов (имеющих одного родителя).

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

article :last-child { color: red; }

При добавлении селектора к :last-child сперва берётся последний элемент, затем смотрится какого он типа. Если элемент совпадает с указанным селектором, то он будет выбран. Таким образом, выбирается элемент, если он удовлетворяет двум условиям одновременно: это последний элемент и это элемент указанного типа. Здесь красным цветом будет выделен абзац, поскольку последним идёт именно <p>.

article p:last-child { color: red; }

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

article h1:last-child { color: red; }

Для выбора последнего элемента определённого типа используйте псевдокласс :last-of-type.

Вместо :last-child допустимо использовать :nth-last-child(1).

Синтаксис

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

Пример

Браузеры

last-child

Посмотреть совместимость на Can I use?

last-child