CSS псевдокласс :nth-last-of-type() находит один или более элементов с заданным тегом, основываясь на их позиции среди группы соседних элементов, считая с конца.

/* Выбирает каждый четвёртый элемент <p>
   среди любой группы соседних элементов,
   отсчёт начинается с последнего элемента */
p:nth-last-of-type(4n) {
  color: lime;
}

Примечание: Этот псевдокласс практически такой же как :nth-of-type, за исключением того, что счёт элементов производится в обратном порядке начиная с конца, а не в обычном порядке с начала.

Синтаксис

Псевдокласс nth-last-of-type указывается с единственным аргументом, описывающим паттерн для выбирания элементов, начиная с конца.

Более детальное описание синтаксиса может быть найдено на странице псевдокласса :nth-last-child.

Формальный синтаксис

:nth-last-of-type( <nth> )

где
<nth> = <an-plus-b> | even | odd

Пример

HTML

<div>
  <span>Это span.</span>
  <span>Это другой span.</span>
  <em>Это текст будет подчёркнут.</em>
  <span>Круто, этот span лаймовый!!!</span>
  <strike>Это вообще не span.</strike>
  <span>Это ещё один последний span.</span>
</div>

CSS

span:nth-last-of-type(2) {
  background-color: lime;
}

Результат

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

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

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

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

См. также

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

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