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

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

Синтаксис

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

Значения

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

Пример

В данном примере мы сделаем красного цвета тот li, который является 4-тым с конца потомком своего родителя:

<ul>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
</ul>

li:nth-last-child(4) {
	color: red;
}

Пример

Сейчас красными сделаем все четные с конца li:

<ul>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
</ul>

li:nth-last-child(even) {
	color: red;
}

Пример

Сейчас красными сделаем все нечетные с конца li:

<ul>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
</ul>

li:nth-last-child(odd) {
	color: red;
}

Пример

Сейчас красными сделаем каждую третью с конца li:

<ul>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
</ul>

li:nth-last-child(3n) {
	color: red;
}