Псеўдаклас 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>element спісу</li>
	<li>element спісу</li>
	<li>element спісу</li>
	<li>element спісу</li>
	<li>element спісу</li>
</ul>

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

Прыклад

Зараз чырвонымі зробім усе цотныя з канца li:

<ul>
	<li>element спісу</li>
	<li>element спісу</li>
	<li>element спісу</li>
	<li>element спісу</li>
	<li>element спісу</li>
</ul>

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

Прыклад

Зараз чырвонымі зробім усе няцотныя з канца li:

<ul>
	<li>element спісу</li>
	<li>element спісу</li>
	<li>element спісу</li>
	<li>element спісу</li>
	<li>element спісу</li>
</ul>

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

Прыклад

Зараз чырвонымі зробім кожны трэці з канца li:

<ul>
	<li>element спісу</li>
	<li>element спісу</li>
	<li>element спісу</li>
	<li>element спісу</li>
	<li>element спісу</li>
</ul>

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