Pseudoklasa nth-last-child

Pseudoklasa nth-last-child wybiera element, który jest n-tym potomkiem rodzica, licząc od końca. Zachowuje się podobnie do nth-child, tylko liczenie jest od końca.

Składnia

selektor:nth-last-child(liczba | odd | even | wyrażenie) {
	
}

Wartości

Wartość	Opis
liczba	Dodatnia liczba zaczynając od `1`. Określa numer elementu, do którego chcemy się odwołać. Numeracja elementów zaczyna się od `1`.
`odd`	Nieparzyste elementy.
`even`	Parzyste elementy.
wyrażenie	Można tworzyć specjalne wyrażenia z literą n, która oznacza wszystkie liczby całkowite od zera (nie od jedności) do nieskończoności. Tak, `2n` - oznacza wszystkie parzyste liczby (zaczynając od drugiego). Jak to zrozumieć? Podstawiamy w `n` kolejno liczby od `0` i tak dalej: jeśli n = 0, to 2n da 0 - takiego elementu nie ma (numeracja elementów od 1), jeśli n = 1, to 2n da 2 - drugi element, jeśli n = 2, 2n daje 4 - czwarty element. Jeśli napisać 3n - to będzie każdy trzeci element (zaczynając od trzeciego), i tak dalej.

Przykład

W tym przykładzie zrobimy czerwonym kolorem ten li, który jest 4-tym od końca potomkiem swojego rodzica:

<ul>
	<li>element listy</li>
	<li>element listy</li>
	<li>element listy</li>
	<li>element listy</li>
	<li>element listy</li>
</ul>

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

Przykład

Teraz czerwonymi zrobimy wszystkie parzyste od końca li:

<ul>
	<li>element listy</li>
	<li>element listy</li>
	<li>element listy</li>
	<li>element listy</li>
	<li>element listy</li>
</ul>

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

Przykład

Teraz czerwonymi zrobimy wszystkie nieparzyste od końca li:

<ul>
	<li>element listy</li>
	<li>element listy</li>
	<li>element listy</li>
	<li>element listy</li>
	<li>element listy</li>
</ul>

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

Przykład

Teraz czerwonymi zrobimy każdy trzeci od końca li:

<ul>
	<li>element listy</li>
	<li>element listy</li>
	<li>element listy</li>
	<li>element listy</li>
	<li>element listy</li>
</ul>

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