Pseudoklasse nth-last-child

Pseudoklassen nth-last-child vælger et element, som er det n'te barneelement af sin forælder, talt fra slutningen. Opfører sig analogt til nth-child, men optællingen foretages fra slutningen.

Syntaks

selektor:nth-last-child(tal | odd | even | udtryk) {
	
}

Værdier

Værdi	Beskrivelse
tal	Et positivt tal startende fra `1`. Angiver nummeret på det element, vi ønsker at henvise til. Nummerering af elementer starter fra `1`.
`odd`	Ulige elementer.
`even`	Lige elementer.
udtryk	Man kan sammensætte specielle udtryk med bogstavet n, som betegner alle heltal fra nul (ikke fra et) til uendeligt. Så, `2n` betyder alle lige tal (startende fra det andet). Hvordan forstås dette? Vi indsætter i `n` sekventielt tal fra `0` og så videre: hvis n = 0, så giver 2n 0 - et sådant element findes ikke (elementnummerering starter fra 1), hvis n = 1, så giver 2n 2 - det andet element, hvis n = 2, giver 2n 4 - det fjerde element. Hvis man skriver 3n - vil det være hvert tredje element (startende fra det tredje), og så videre.

Eksempel

I dette eksempel vil vi gøre den li, som er det 4. fra slutningen barneelement af sin forælder, rød:

<ul>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
</ul>

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

Eksempel

Nu vil vi gøre alle lige li (talt fra slutningen) røde:

<ul>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
</ul>

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

Eksempel

Nu vil vi gøre alle ulige (talt fra slutningen) li røde:

<ul>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
</ul>

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

Eksempel

Nu vil vi gøre hver tredje (talt fra slutningen) li rød:

<ul>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
</ul>

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