:last-of-type
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
CSS псевдокласс :last-of-type
находит последнего потомка с заданным тегом в списке детей родительского элемента.
/* Выбирает <p>, являющийся последним элементом
среди элементов своего типа среди своих соседей */
p:last-of-type {
color: lime;
}
Примечание: В первоначальном определении выбранный элемент должен иметь родителя. Начиная с Selectors Level 4, это не является обязательным.
Синтаксис
Пример
Стилизация последнего параграфа
HTML
<h2>Заголовок</h2>
<p>Параграф 1</p>
<p>Параграф 2</p>
CSS
p:last-of-type {
color: red;
font-style: italic;
}
Результат
Вложенные элементы
Этот пример показывает как можно обратиться к вложенным элементам. Заметим, что в случаях когда не указано ни одного простого селектора, подразумевается универсальный селектор (*
).
HTML
<article>
<div>Этот `div` первый.</div>
<div>Этот <span>вложенный `span` является последним</span>!</div>
<div>
Этот <em>вложенный `em` первый</em>, а этот
<em>вложенный `em` последний</em>!
</div>
<b>Этот `b` будет выбран!</b>
<div>Это последний `div`!</div>
</article>
CSS
article :last-of-type {
background-color: pink;
}
Результат
Спецификации
Specification |
---|
Selectors Level 4 # last-of-type-pseudo |
Совместимость с браузерами
BCD tables only load in the browser