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

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

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

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

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

Пример

Пример 1

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

p:nth-last-child(2) {
  background-color: red;
}

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

Пример 2

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

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

p:nth-last-child(odd) {
  background-color: red;
}
p:nth-last-child(even) {
  background-color: blue;
}

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

Пример 3

Используйте формулу (an + bОписание:a пresents an integer step, n is all non-negative integers starting from 0,b является целым смещением.

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

p:nth-last-child(3n+0) {
  background-color: red;
}

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

CSS грамматика

:nth-last-child(index | нечетный | четный | an+b) {
  css declarations;
}

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

Поддержка браузеров

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