Pseudoluokka nth-last-of-type

Pseudoluokka nth-last-of-type valitsee elementin, joka on vanhemman n. kohde annetusta tyypistä, laskenta lopusta. Käyttäytyy samoin kuin nth-of-type, mutta laskenta alkaa lopusta.

Syntaksi

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

Arvot

Arvo	Kuvaus
luku	Positiivinen luku alkaen `1`. Määrittää elementin järjestysnumeron, jota haluamme valita. Elementtien numerointi alkaa `1`.
`odd`	Parittomat elementit.
`even`	Parilliset elementit.
lauseke	Voi muodostaa erikoislausekkeita kirjaimella n, joka edustaa kaikkia kokonaislukuja nollasta (ei ykkösestä) äärettömyyteen. Niin, `2n` tarkoittaa kaikkia parillisia lukuja (alkaen toisesta). Miten 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 - se on joka kolmas elementti (alkaen kolmannesta), ja niin edelleen.

Esimerkki

Etsitään h2, joka on 2. h2 vanhemmassaan lopusta laskien:

<div>
	<h2>otsikko</h2>
	<p>kappale</p>
	
	<h2>otsikko</h2>
	<p>kappale</p>
	
	<h2>otsikko</h2>
	<p>kappale</p>
	
	<h2>otsikko</h2>
	<p>kappale</p>
	
	<h2>otsikko</h2>
	<p>kappale</p>
	
	<h2>otsikko</h2>
	<p>kappale</p>
	
	<h2>otsikko</h2>
	<p>kappale</p>
</div>

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

Esimerkki

Etsitään kaikki parilliset h2 lopusta laskien:

<div>
	<h2>otsikko</h2>
	<p>kappale</p>
	
	<h2>otsikko</h2>
	<p>kappale</p>
	
	<h2>otsikko</h2>
	<p>kappale</p>
	
	<h2>otsikko</h2>
	<p>kappale</p>
	
	<h2>otsikko</h2>
	<p>kappale</p>
	
	<h2>otsikko</h2>
	<p>kappale</p>
	
	<h2>otsikko</h2>
	<p>kappale</p>
</div>

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

Esimerkki

Etsitään kaikki parittomat h2 lopusta laskien:

<div>
	<h2>otsikko</h2>
	<p>kappale</p>
	
	<h2>otsikko</h2>
	<p>kappale</p>
	
	<h2>otsikko</h2>
	<p>kappale</p>
	
	<h2>otsikko</h2>
	<p>kappale</p>
	
	<h2>otsikko</h2>
	<p>kappale</p>
	
	<h2>otsikko</h2>
	<p>kappale</p>
	
	<h2>otsikko</h2>
	<p>kappale</p>
</div>

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