Псевдоклас 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>елемент от списък</li>
	<li>елемент от списък</li>
	<li>елемент от списък</li>
	<li>елемент от списък</li>
	<li>елемент от списък</li>
</ul>

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

Пример

Сега в червено ще направим всички четни от края li:

<ul>
	<li>елемент от списък</li>
	<li>елемент от списък</li>
	<li>елемент от списък</li>
	<li>елемент от списък</li>
	<li>елемент от списък</li>
</ul>

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

Пример

Сега в червено ще направим всички нечетни от края li:

<ul>
	<li>елемент от списък</li>
	<li>елемент от списък</li>
	<li>елемент от списък</li>
	<li>елемент от списък</li>
	<li>елемент от списък</li>
</ul>

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

Пример

Сега в червено ще направим всеки трети от края li:

<ul>
	<li>елемент от списък</li>
	<li>елемент от списък</li>
	<li>елемент от списък</li>
	<li>елемент от списък</li>
	<li>елемент от списък</li>
</ul>

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