nth-last-of-type pszeudoklasszis

Az nth-last-of-type pszeudoklasszis kiválaszt egy elemet, amely a szülő n-edik, adott típusú leszármazója, a végétől számolva. Hasonlóan viselkedik, mint a nth-of-type, csak a számolás a végétől történik.

Szintaxis

szelektor:nth-last-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, amelyhez szeretnénk hozzáférni. Az elemek számozása `1`-től kezdődik.
`odd`	Páratlan elemek.
`even`	Páros elemek.
kifejezés	Készíthetünk speciális kifejezéseket 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 az `n` helyére egymás után a számokat `0`-tól kezdve: ha n = 0, akkor 2n 0-t ad - nincs ilyen elem (az elemek számozása 1-től indul), ha n = 1, akkor 2n 2-t ad - a második elem, ha n = 2, 2n 4-et ad - 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 elemet, amely a 2. h2 a szülőben a végétől számolva:

<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>
	
	<h2>cím</h2>
	<p>bekezdés</p>
	
	<h2>cím</h2>
	<p>bekezdés</p>
</div>

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

Példa

Keressük meg az összes páros h2 elemet a végétől számolva:

<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>
	
	<h2>cím</h2>
	<p>bekezdés</p>
	
	<h2>cím</h2>
	<p>bekezdés</p>
</div>

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

Példa

Keressük meg az összes páratlan h2 elemet a végétől számolva:

<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>
	
	<h2>cím</h2>
	<p>bekezdés</p>
	
	<h2>cím</h2>
	<p>bekezdés</p>
</div>

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