Pseudoluokka nth-of-type

Pseudoluokka nth-of-type valitsee elementin, joka on n:s määritetyn tyypin lapsi.

Eli, jos kirjoitan h2:nth-of-type(4) - löytyy 4.s h2 vanhemmassaan (toisin kuin nth-child, joka löytää vain sen h2:n, joka on 4.s elementti vanhemmassaan).

Syntaksi

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

}

Arvot

Arvo	Kuvaus
luku	Positiivinen luku alkaen `1`. Määrittää elementin järjestysnumeron, johon haluamme viitata. Elementtien numerointi alkaa `1`:stä.
`odd`	Parittomat elementit.
`even`	Parilliset elementit.
lauseke	Voi muodostaa erikoislausekkeita kirjaimella n, joka edustaa kaikkia kokonaislukuja nollasta (ei ykkösestä) äärettömyyteen. Joten, `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

Etsitään h2, joka on 2.s h2 vanhemmassaan:

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

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

Esimerkki

Etsitään kaikki parilliset h2:t:

<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>
</div>

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

Esimerkki

Etsitään kaikki parittomat h2:t:

<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>
</div>

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