Псевдокласс nth-last-of-type выбирает элемент, который является n-ным потомком родителя такого типа, отсчитывая с конца. Ведет себя аналогично nth-of-type, только отсчет ведется с конца.

Синтаксис

селектор:nth-last-of-type(число | odd | even | выражение) {
	
}

Значения

Значение Описание
Число Положительное число начиная с 1. Задает номер элемента, к которому мы хотим обратиться. Нумерация элементов начинается с 1.
odd Нечетные элементы.
even Четные элементы.
Выражение Можно составлять специальные выражения с буквой n, которая обозначает все целые числа от нуля (не от единицы!) до бесконечности. Так, 2n - значит все четные числа (начиная со второго). Как это понять? Подставляем в n последовательно числа от 0 и так далее: если n = 0, то 2n даст 0 - такого элемента нет (нумерация элементов с 1!), если n = 1, то 2n даст 2 - второй элемент, если n = 2, 2n дает 4 - четвертый элемент. Если написать 3n - это будет каждый третий элемент (начиная с третьего!), и так далее.

Примеры

Пример

Найдем h2, который является 4-тым h2 в родителе с конца:

h2:nth-last-of-type(4) {
	color: red;
}

Результат выполнения кода:

Это абзац №1

Это h2 №1

Это абзац №2

Это h2 №2

Это абзац №3

Это h2 №3

Это абзац №4

Это h2 №4

Это абзац №5

Это h2 №5

Это абзац №6

Пример

Найдем четные h2 с конца:

h2:nth-last-of-type(even) {
	color: red;
}

Результат выполнения кода:

Это абзац №1

Это h2 №1

Это абзац №2

Это h2 №2

Это абзац №3

Это h2 №3

Это абзац №4

Это h2 №4

Это абзац №5

Это h2 №5

Это абзац №6

Это h2 №6

Это абзац №7

Пример

Найдем нечетные h2 с конца:

h2:nth-last-of-type(odd) {
	color: red;
}

Результат выполнения кода:

Это абзац №1

Это h2 №1

Это абзац №2

Это h2 №2

Это абзац №3

Это h2 №3

Это абзац №4

Это h2 №4

Это абзац №5

Это h2 №5

Это абзац №6

Это h2 №6

Это абзац №7