Pseidoklase nth-of-type

Pseidoklase nth-of-type atlasa elementu, kas ir n-tais pēctecis norādītā tipa.

Tas ir, ja es uzrakstīšu h2:nth-of-type(4) - tiks atrasts 4-tais h2 vecākajā elementā (atšķirībā no nth-child, kas atradīs tikai to h2, kas ir 4-tais elements vecākajā elementā).

Sintakse

selektors:nth-of-type(skaitlis | odd | even | izteiksme){

}

Vērtības

Vērtība	Apraksts
skaitlis	Pozitīvs skaitlis sākot no `1`. Norāda elementa numuru, pie kura vēlamies piekļūt. Elementu numerācija sākas no `1`.
`odd`	Nepāra elementi.
`even`	Pāra elementi.
izteiksme	Var veidot speciālas izteiksmes ar burtu n, kas apzīmē visus veselos skaitļus no nulles (ne no vieninieka) līdz bezgalībai. Tātad, `2n` - nozīmē visus pāra skaitļus (sākot no otrā). Kā to saprast? Aizvietojam `n` secīgi skaitļus no `0` un tālāk: ja n = 0, tad 2n dos 0 - tāda elementa nav (elementu numerācija ir no 1), ja n = 1, tad 2n dos 2 - otrais elements, ja n = 2, 2n dod 4 - ceturtais elements. Ja rakstīt 3n - tas būs katrs trešais elements (sākot no trešā), un tā tālāk.

Piemērs

Atradīsim h2, kas ir 2-tais h2 vecākajā elementā:

<div>
	<h2>virsraksts</h2>
	<p>rindkopa</p>
	
	<h2>virsraksts</h2>
	<p>rindkopa</p>
	
	<h2>virsraksts</h2>
	<p>rindkopa</p>
</div>

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

Piemērs

Atradīsim visus pāra h2:

<div>
	<h2>virsraksts</h2>
	<p>rindkopa</p>
	
	<h2>virsraksts</h2>
	<p>rindkopa</p>
	
	<h2>virsraksts</h2>
	<p>rindkopa</p>
	
	<h2>virsraksts</h2>
	<p>rindkopa</p>
	
	<h2>virsraksts</h2>
	<p>rindkopa</p>
</div>

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

Piemērs

Atradīsim visus nepāra h2:

<div>
	<h2>virsraksts</h2>
	<p>rindkopa</p>
	
	<h2>virsraksts</h2>
	<p>rindkopa</p>
	
	<h2>virsraksts</h2>
	<p>rindkopa</p>
	
	<h2>virsraksts</h2>
	<p>rindkopa</p>
	
	<h2>virsraksts</h2>
	<p>rindkopa</p>
</div>

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