: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.

We’d love to hear your thoughts on the next set of proposals for the JavaScript language. You can find a description of the proposals here.
Please take two minutes to fill out our short survey.

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

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

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