nth-of-type pszeudoklasszis

Az nth-of-type pszeudoklasszis olyan elemet választ ki, ami egy adott típusú n-edik leszármazott.

Azaz, ha én azt írom, hogy h2:nth-of-type(4) - akkor a negyedik h2 lesz kiválasztva a szülőben (ellentétben a nth-child pszeudoklasszissal, ami csak akkor találja meg a h2-t, ha az a szülő negyedik 4 eleme).

Szintaxis

szelektor:nth-of-type(szám | odd | even | kifejezés){

}

Értékek

Érték	Leírás
szám	Pozitív szám `1`-től kezdve. Meghatározza annak az elemnek a sorszámát, amire célzunk. Az elemek számozása `1`-től kezdődik.
`odd`	Páratlan sorszámú elemek.
`even`	Páros sorszámú elemek.
kifejezés	Készíthetünk speciális kifejezéseket az n betűvel, ami minden egész számot jelöl nullától (nem egyetől) a végtelenig. Így a `2n` minden páros sorszámot jelent (a másodiktól kezdve). Hogyan értsük ezt? Helyettesítsük be a `n` helyére egymás után a számokat `0`-tól kezdve: ha n = 0, akkor 2n ad 0-t - ilyen elem nincs (az elemek számozása 1-től indul), ha n = 1, akkor 2n ad 2-t - a második elem, ha n = 2, 2n ad 4-et - a negyedik elem. Ha 3n-t írunk - az minden harmadik elemet jelent (a harmadiktól kezdve), és így tovább.

Példa

Keressük meg azt a h2-t, ami a második h2 a szülőben:

<div>
	<h2>cím</h2>
	<p>bekezdés</p>
	
	<h2>cím</h2>
	<p>bekezdés</p>
	
	<h2>cím</h2>
	<p>bekezdés</p>
</div>

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

Példa

Keressük meg az összes páros h2-t:

<div>
	<h2>cím</h2>
	<p>bekezdés</p>
	
	<h2>cím</h2>
	<p>bekezdés</p>
	
	<h2>cím</h2>
	<p>bekezdés</p>
	
	<h2>cím</h2>
	<p>bekezdés</p>
	
	<h2>cím</h2>
	<p>bekezdés</p>
</div>

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

Példa

Keressük meg az összes páratlan h2-t:

<div>
	<h2>cím</h2>
	<p>bekezdés</p>
	
	<h2>cím</h2>
	<p>bekezdés</p>
	
	<h2>cím</h2>
	<p>bekezdés</p>
	
	<h2>cím</h2>
	<p>bekezdés</p>
	
	<h2>cím</h2>
	<p>bekezdés</p>
</div>

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