Pseudotřída nth-child

Pseudotřída nth-child vybírá prvek, který je n-tým potomkem rodiče.

Syntaxe

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

Hodnoty

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

Příklad

V tomto příkladu nastavíme červenou barvu tomu li, který je 4.-tým 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-child(4) {
	color: red;
}

Příklad

Nyní nastavíme červenou barvu všem sudým 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-child(even) {
	color: red;
}

Příklad

Nyní nastavíme červenou barvu všem lichým 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-child(odd) {
	color: red;
}

Příklad

Nyní nastavíme červenou barvu každé třetí li (počínaje třetí):

<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-child(3n) {
	color: red;
}

Příklad

V selektoru lze určit rozsah prvků. Předpokládejme, že máte seznam 20 prvků a potřebujete vybrat prvky od 7 do 14 včetně. To lze provést takto:

<ol>
	<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>
	<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>
	<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>
	<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>
</ol>

li:nth-child(n+7):nth-child(-n+14) {
	color: red;
}