Pseudotrieda nth-of-type

Pseudotrieda nth-of-type vyberá element, ktorý je n-tým potomkom daného typu.

To znamená, že ak napíšem h2:nth-of-type(4) - nájde sa 4-ty h2 v rodičovi (na rozdiel od nth-child, ktorý nájde len ten h2, ktorý je 4-tym elementom v rodičovi).

Syntax

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

}

Hodnoty

Hodnota	Popis
číslo	Kladné číslo začínajúce od `1`. Určuje číslo elementu, ku ktorému sa chceme dostať. Číslovanie elementov začína od `1`.
`odd`	Nepárne elementy.
`even`	Párne elementy.
výraz	Môžeme vytvoriť špeciálne výrazy s písmenom n, ktoré označuje všetky celé čísla od nuly (nie od jednotky) do nekonečna. Takže `2n` - znamená všetky párne čísla (začína od druhého). Ako to pochopiť? Dosadzujeme do `n` postupne čísla od `0` a tak ďalej: ak n = 0, potom 2n dá 0 - taký element neexistuje (číslovanie elementov od 1), ak n = 1, potom 2n dá 2 - druhý element, ak n = 2, 2n dáva 4 - štvrtý element. Ak napíšeme 3n - to bude každý tretí element (začína od tretieho), a tak ďalej.

Príklad

Nájdeme h2, ktorý je 2-ym h2 v rodičovi:

<div>
	<h2>nadpis</h2>
	<p>odsek</p>
	
	<h2>nadpis</h2>
	<p>odsek</p>
	
	<h2>nadpis</h2>
	<p>odsek</p>
</div>

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

Príklad

Nájdeme všetky párne h2:

<div>
	<h2>nadpis</h2>
	<p>odsek</p>
	
	<h2>nadpis</h2>
	<p>odsek</p>
	
	<h2>nadpis</h2>
	<p>odsek</p>
	
	<h2>nadpis</h2>
	<p>odsek</p>
	
	<h2>nadpis</h2>
	<p>odsek</p>
</div>

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

Príklad

Nájdeme všetky nepárne h2:

<div>
	<h2>nadpis</h2>
	<p>odsek</p>
	
	<h2>nadpis</h2>
	<p>odsek</p>
	
	<h2>nadpis</h2>
	<p>odsek</p>
	
	<h2>nadpis</h2>
	<p>odsek</p>
	
	<h2>nadpis</h2>
	<p>odsek</p>
</div>

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