Pseudotřída nth-of-type

Pseudotřída nth-of-type vybere element, který je n-tým potomkem daného typu.

To znamená, že pokud napíšu h2:nth-of-type(4) - najde se 4-tý h2 v rodiči (na rozdíl od nth-child, který najde pouze ten h2, který je 4-tým prvkem v rodiči).

Syntaxe

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

}

Hodnoty

Hodnota	Popis
číslo	Kladné číslo začínající od `1`. Určuje číslo prvku, ke kterému se chceme dostat. Číslování prvků začíná od `1`.
`odd`	Liché prvky.
`even`	Sudé prvky.
výraz	Lze skládat speciální výrazy s písmenem n, které označuje 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ý prvek neexistuje (číslování prvků od 1), pokud n = 1, pak 2n dá 2 - druhý prvek, pokud n = 2, 2n dá 4 - čtvrtý prvek. Pokud napíšeme 3n - to bude každý třetí prvek (počínaje třetím), a tak dále.

Příklad

Najdeme h2, který je 2-ým h2 v rodiči:

<div>
	<h2>nadpis</h2>
	<p>odstavec</p>
	
	<h2>nadpis</h2>
	<p>odstavec</p>
	
	<h2>nadpis</h2>
	<p>odstavec</p>
</div>

h2:nth-of-type(2) {
	color: red;
}

Příklad

Najdeme všechny sudé h2:

<div>
	<h2>nadpis</h2>
	<p>odstavec</p>
	
	<h2>nadpis</h2>
	<p>odstavec</p>
	
	<h2>nadpis</h2>
	<p>odstavec</p>
	
	<h2>nadpis</h2>
	<p>odstavec</p>
	
	<h2>nadpis</h2>
	<p>odstavec</p>
</div>

h2:nth-of-type(even) {
	color: red;
}

Příklad

Najdeme všechny liché h2:

<div>
	<h2>nadpis</h2>
	<p>odstavec</p>
	
	<h2>nadpis</h2>
	<p>odstavec</p>
	
	<h2>nadpis</h2>
	<p>odstavec</p>
	
	<h2>nadpis</h2>
	<p>odstavec</p>
	
	<h2>nadpis</h2>
	<p>odstavec</p>
</div>

h2:nth-of-type(odd) {
	color: red;
}