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' в этой спецификации.
Рекомендация Изначальное определение.

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

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidEdge MobileFirefox для AndroidOpera для AndroidiOS SafariSamsung Internet
Базовая поддержкаChrome Полная поддержка 1Edge Полная поддержка ДаFirefox Полная поддержка 3.5IE Полная поддержка 9Opera Полная поддержка 9.5Safari Полная поддержка 3.2WebView Android Полная поддержка 2Chrome Android ? Edge Mobile Полная поддержка ДаFirefox Android Полная поддержка 4Opera Android Полная поддержка 10Safari iOS Полная поддержка 3.2Samsung Internet Android ?

Легенда

Полная поддержка  
Полная поддержка
Совместимость неизвестна  
Совместимость неизвестна

См. также

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

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