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

Обновлено: 27.05.2022

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

Псевдокласс :nth-last-child используется для добавления стиля к элементам на основе нумерации в дереве элементов. В отличие от псевдокласса :nth-child отсчёт ведётся не от первого элемента, а от последнего.

Синтаксис

<i>Селектор</i>:nth-last-child(odd | even | <число> | <выражение>) {...}

Значения

odd Все нечётные номера элементов, начиная с конца.
even Все чётные номера элементов, начиная с конца.
<число> Порядковый номер дочернего элемента относительно своего родителя. Нумерация начинается с 1, это соответствует последнему элементу в списке.
<выражение> Задаётся в виде an±b, где a и b целые числа, а n — счётчик, который автоматически принимает значение 0, 1, 2...

Если a равно нулю, то оно не пишется и запись сокращается до b. Если b равно нулю, то оно также не указывается и выражение записывается в форме an. a и b могут быть отрицательными числами, в этом случае знак плюс меняется на минус, например: 5n-1.

За счёт использования отрицательных значений a и b некоторые результаты могут также получиться отрицательными или равными нулю. Однако на элементы оказывают влияние только положительные значения из-за того, что нумерация элементов начинается с 1.

В табл. 1 приведены некоторые возможные выражения и ключевые слова, а также указано, какие номера элементов будут задействованы. Отсчёт ведётся от последнего элемента.

Табл. 1. Результат для различных значений псевдокласса
Значение Номера элементов Описание
1 1 Последний элемент, является синонимом псевдокласса :last-child.
5 5 Пятый элемент с конца.
2n 2, 4, 6, 8, 10,… Все чётные элементы, начиная с конца; аналог значения even.
2n+1 1, 3, 5, 7, 9,… Все нечётные элементы, начиная с конца; аналог значения odd.
3n 3, 6, 9, 12,… Каждый третий элемент, начиная с конца.
3n+2 2, 5, 8, 11, 14,… Каждый третий элемент, начиная с предпоследнего.
n+4 4, 5, 6, 7, 8,… Все элементы, кроме последних трёх.
-n+3 3, 2, 1 Последние три элемента.
5n-2 3, 8, 13, 18, 23,…
even 2, 4, 6, 8, 10,… Все чётные элементы, начиная с конца.
odd 1, 3, 5, 7, 9,… Все нечётные элементы, начиная с конца.

Пример

В данном примере псевдокласс :nth-last-child используется для выделения цветом всех нечётных колонок, начиная с последней (рис. 1).

Рис. 1. Применение псевдокласса :nth-last-child к колонкам таблицы

Браузеры

:nth-last-child

Посмотреть совместимость на Can I use?

:nth-last-child