Pseudoluokka nth-last-child

Pseudoluokka nth-last-child valitsee elementin, joka on vanhempien n:s lapsi laskettuna lopusta alkaen. Se käyttäytyy vastaavasti kuin nth-child, mutta laskenta alkaa lopusta.

Syntaksi

valitsija:nth-last-child(luku | odd | even | lauseke) {
	
}

Arvot

Arvo	Kuvaus
luku	Positiivinen luku alkaen `1`. Määrittää elementin numeron, jota haluamme kohdistaa. Elementtien numerointi alkaa `1`.
`odd`	Parittomat elementit.
`even`	Parilliset elementit.
lauseke	Voi muodostaa erikoislausekkeita kirjaimella n, joka edustaa kaikkia kokonaislukuja nollasta (ei yhdestä) äärettömyyteen. Niin, `2n` tarkoittaa kaikkia parillisia lukuja (alkaen toisesta). Kuinka tämä ymmärretään? Korvaamme `n`:ään peräkkäin luvut alkaen `0` ja niin edelleen: jos n = 0, niin 2n antaa 0 - tällaista elementtiä ei ole (elementtien numerointi alkaa 1:stä), jos n = 1, niin 2n antaa 2 - toinen elementti, jos n = 2, 2n antaa 4 - neljäs elementti. Jos kirjoitat 3n - tämä on joka kolmas elementti (alkaen kolmannesta), ja niin edelleen.

Esimerkki

Tässä esimerkissä teemme punaiseksi sen li-elementin, joka on 4:s lopusta laskettuna vanhempien lapsi:

<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;
}

Esimerkki

Nyt teemme punaisiksi kaikki parilliset lopusta alkaen olevat li-elementit:

<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;
}

Esimerkki

Nyt teemme punaisiksi kaikki parittomat lopusta alkaen olevat li-elementit:

<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;
}

Esimerkki

Nyt teemme punaisiksi joka kolmannen lopusta alkaen olevan li-elementin:

<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;
}