: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 июль 2015 г..
CSS псевдокласс :last-of-type находит последнего потомка с заданным тегом в списке детей родительского элемента.
css
/* Выбирает <p>, являющийся последним элементом
среди элементов своего типа среди своих соседей */
p:last-of-type {
color: lime;
}
Примечание: В первоначальном определении выбранный элемент должен иметь родителя. Начиная с Selectors Level 4, это не является обязательным.
Синтаксис
Error: could not find syntax for this itemПример
Стилизация последнего параграфа
HTML
html
<h2>Заголовок</h2>
<p>Параграф 1</p>
<p>Параграф 2</p>
CSS
css
p:last-of-type {
color: red;
font-style: italic;
}
Результат
Вложенные элементы
Этот пример показывает как можно обратиться к вложенным элементам. Заметим, что в случаях когда не указано ни одного простого селектора, подразумевается универсальный селектор (*).
HTML
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
css
article :last-of-type {
background-color: pink;
}
Результат
Спецификации
| Specification |
|---|
| Selectors Level 4 # last-of-type-pseudo |
Совместимость с браузерами
Loading…