CSS псевдокласс :last-of-type находит последнего потомка с заданным тегом в списке детей родительского элемента.

/* Выбирает <p>, являющийся последним элементом
   среди элементов своего типа среди своих соседей */
p:last-of-type {
  color: lime;
}

Примечание: В первоначальном определении выбранный элемент должен иметь родителя. Начиная с Selectors Level 4, это не является обязательным.

Синтаксис

:last-of-type

Пример

Стилизация последнего параграфа

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;
}

Результат

Спецификации

Спецификация Статус Комментарий
Selectors Level 4
Определение ':last-of-type' в этой спецификации.
Рабочий черновик Теперь выбранные элементы не обязательно должны иметь родителя.
Selectors Level 3
Определение ':last-of-type' в этой спецификации.
Рекомендация Изначальное определение.

Поддержка браузерами

ВозможностьChromeEdgeFirefoxInternet ExplorerOperaSafari
Базовая поддержка1 Да3.599.53.2
ВозможностьAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Базовая поддержка2.1 ? Да4103.2 ?

См. также

Метки документа и участники

Внесли вклад в эту страницу: dima74, BychekRU
Обновлялась последний раз: dima74,