Pseudoklasse nth-last-child

Pseudoklassen nth-last-child velger et element som er det n-te barneelementet til en forelder, og teller fra slutten. Oppfører seg liknende som nth-child, men tellingen skjer fra slutten.

Syntaks

velger:nth-last-child(tall | odd | even | uttrykk) {
	
}

Verdier

Verdi	Beskrivelse
tall	Et positivt tall fra og med `1`. Angir nummeret på elementet vi ønsker å rette oss mot. Nummereringen av elementer starter på `1`.
`odd`	Odde elementer.
`even`	Partall elementer.
uttrykk	Man kan sette sammen spesielle uttrykk med bokstaven n, som representerer alle heltall fra null (ikke fra én) til uendelig. Så, `2n` betyr alle partall (med start fra det andre). Hvordan forstå dette? Vi setter inn i `n` sekvensielt tall fra `0` og så videre: hvis n = 0, gir 2n 0 - det finnes ikke noe slikt element (elementnummerering starter fra 1), hvis n = 1, gir 2n 2 - det andre elementet, hvis n = 2, gir 2n 4 - det fjerde elementet. Hvis man skriver 3n - vil dette være hvert tredje element (med start fra det tredje), og så videre.

Eksempel

I dette eksempelet vil vi gjøre den li som er det 4.te fra slutten barneelementet til sin forelder rød:

<ul>
	<li>listeelement</li>
	<li>listeelement</li>
	<li>listeelement</li>
	<li>listeelement</li>
	<li>listeelement</li>
</ul>

li:nth-last-child(4) {
	color: red;
}

Eksempel

Nå vil vi gjøre alle partall fra slutten li røde:

<ul>
	<li>listeelement</li>
	<li>listeelement</li>
	<li>listeelement</li>
	<li>listeelement</li>
	<li>listeelement</li>
</ul>

li:nth-last-child(even) {
	color: red;
}

Eksempel

Nå vil vi gjøre alle odde fra slutten li røde:

<ul>
	<li>listeelement</li>
	<li>listeelement</li>
	<li>listeelement</li>
	<li>listeelement</li>
	<li>listeelement</li>
</ul>

li:nth-last-child(odd) {
	color: red;
}

Eksempel

Nå vil vi gjøre hver tredje fra slutten li rød:

<ul>
	<li>listeelement</li>
	<li>listeelement</li>
	<li>listeelement</li>
	<li>listeelement</li>
	<li>listeelement</li>
</ul>

li:nth-last-child(3n) {
	color: red;
}