: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 находит последнего потомка с заданным тегом в списке детей родительского элемента.

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

Совместимость с браузерами

BCD tables only load in the browser

Смотрите также