Pseudotřída nth-last-child

Pseudotřída nth-last-child vybírá element, který je n-tým potomkem rodiče, počítáno od konce. Chová se analogicky k nth-child, jen se počítá od konce.

Syntaxe

selektor:nth-last-child(číslo | odd | even | výraz) {
	
}

Hodnoty

Hodnota	Popis
číslo	Kladné číslo počínaje `1`. Určuje pořadí elementu, na který chceme cílit. Číslování elementů začíná od `1`.
`odd`	Liché elementy.
`even`	Sudé elementy.
výraz	Lze skládat speciální výrazy s písmenem n, které značí všechna celá čísla od nuly (ne od jedničky) do nekonečna. Takže `2n` znamená všechna sudá čísla (počínaje druhým). Jak to pochopit? Dosazujeme do `n` postupně čísla od `0` a dále: pokud n = 0, pak 2n dá 0 - takový element neexistuje (číslování elementů je od 1), pokud n = 1, pak 2n dá 2 - druhý element, pokud n = 2, 2n dá 4 - čtvrtý element. Pokud napíšeme 3n - bude to každý třetí element (počínaje třetím), a tak dále.

Příklad

V tomto příkladu uděláme červenou barvu toho li, který je 4-tým od konce potomkem svého rodiče:

<ul>
	<li>položka seznamu</li>
	<li>položka seznamu</li>
	<li>položka seznamu</li>
	<li>položka seznamu</li>
	<li>položka seznamu</li>
</ul>

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

Příklad

Nyní červenými uděláme všechny sudé od konce li:

<ul>
	<li>položka seznamu</li>
	<li>položka seznamu</li>
	<li>položka seznamu</li>
	<li>položka seznamu</li>
	<li>položka seznamu</li>
</ul>

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

Příklad

Nyní červenými uděláme všechny liché od konce li:

<ul>
	<li>položka seznamu</li>
	<li>položka seznamu</li>
	<li>položka seznamu</li>
	<li>položka seznamu</li>
	<li>položka seznamu</li>
</ul>

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

Příklad

Nyní červenými uděláme každou třetí od konce li:

<ul>
	<li>položka seznamu</li>
	<li>položka seznamu</li>
	<li>položka seznamu</li>
	<li>položka seznamu</li>
	<li>položka seznamu</li>
</ul>

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