Pseidoklase nth-last-of-type

Pseidoklase nth-last-of-type atlasa elementu, kas ir n-tais vecāka tips norādītā tipa pēctecis, skaitot no beigām. Darbojas līdzīgi kā nth-of-type, tikai skaitīšana notiek no beigām.

Sintakse

selector:nth-last-of-type(skaitlis | odd | even | izteiksme) {
	
}

Vērtības

Vērtība	Apraksts
skaitlis	Pozitīvs skaitlis sākot ar `1`. Norāda elementa numuru, pie kura mēs vēlamies piekļūt. Elementu numerācija sākas ar `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 viena) 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 no 1), ja n = 1, tad 2n dos 2 - otrais elements, ja n = 2, 2n dos 4 - ceturtais elements. Ja rakstītu 3n - tas būtu katrs trešais elements (sākot no trešā), un tā tālāk.

Piemērs

Atradīsim h2, kas ir 2-ais h2 vecākajā no beigām:

<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>
	
	<h2>virsraksts</h2>
	<p>rindkopa</p>
	
	<h2>virsraksts</h2>
	<p>rindkopa</p>
</div>

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

Piemērs

Atradīsim visus pāra h2 no beigām:

<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>
	
	<h2>virsraksts</h2>
	<p>rindkopa</p>
	
	<h2>virsraksts</h2>
	<p>rindkopa</p>
</div>

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

Piemērs

Atradīsim visus nepāra h2 no beigām:

<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>
	
	<h2>virsraksts</h2>
	<p>rindkopa</p>
	
	<h2>virsraksts</h2>
	<p>rindkopa</p>
</div>

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