Псевдо-класс CSS :nth-last-of-type()

Определение и использование

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

n может быть числом/индексом, ключевым словом (нечетный или четный) или формулой (например, an + b).

Совет:Смотреть :nth-last-child() псевдо-классы используются для выбора элементов, которые являются nth по обратному счету в родительском элементе. n элементов-подэлементов, независимо от их типа.

Пример

Пример 1

Для каждого элемента <p>, который является вторым по обратному счету в родительском элементе, задается цвет фона.

В то же время, для каждого элемента <li>, который является третьим по обратному счету в родительском элементе, задается цвет фона:

p:nth-last-of-type(2) {
  background: red;
}
li:nth-last-of-type(3) {
background: yellow;
}

Попробуйте сами

Пример 2

нечетный и четный является ключевым словом, которое можно использовать для соответствия подэлементам с нечетным или четным индексом (индекс первого подэлемента равен 1).

Здесь мы задаем разный цвет фона для элементов <p> с нечетным и четным индексом в обратном порядке:

p:nth-last-of-type(odd) {
  background: red;
}
p:nth-last-of-type(even) {
  background: blue;
}

Попробуйте сами

Пример 3

Используйте формулу (an + b). Описание: a - это целое число шага, n - это все не負ные целые числа, начинающиеся с 0, b - это целое смещение.

Здесь мы задаем цвет фона для всех элементов <p> и <li>, у которых индекс в обратном порядке является кратным 3:

p:nth-last-of-type(3n) {
  background: red;
}
li:nth-last-of-type(3n) {
  background: yellow;
}

Попробуйте сами

CSS грамматика

:nth-last-of-type(index | нечетный | четный | an+b) {
  css объявления;
}

Технические детали

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

Числа в таблице указывают на первую версию браузера, которая полностью поддерживает этот псевдо-класс.