Pseidoklase nth-child

Pseidoklase nth-child izvēlas elementu, kurs ir n-tais vecāka pēctecis.

Sintakse

selektors:nth-child(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 mēs vēlamies piekļūt. Elementu numerācija sākas no `1`.
`odd`	Nepāra elementi.
`even`	Pāra elementi.
izteiksme	Var izveidot īpašas 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āds elements neeksistē (elementu numerācija no 1), ja n = 1, tad 2n dos 2 - otrais elements, ja n = 2, 2n dod 4 - ceturtais elements. Ja raksta 3n - tas būs katrs trešais elements (sākot no trešā), un tā tālāk.

Piemērs

Šajā piemērā mēs padarīsim sarkanā krāsā to li, kurš ir 4-tais pēctecis sava vecāka:

<ul>
	<li>saraksta vienība</li>
	<li>saraksta vienība</li>
	<li>saraksta vienība</li>
	<li>saraksta vienība</li>
	<li>saraksta vienība</li>
</ul>

li:nth-child(4) {
	color: red;
}

Piemērs

Tagad sarkanus padarīsim visus pāra li:

<ul>
	<li>saraksta vienība</li>
	<li>saraksta vienība</li>
	<li>saraksta vienība</li>
	<li>saraksta vienība</li>
	<li>saraksta vienība</li>
</ul>

li:nth-child(even) {
	color: red;
}

Piemērs

Tagad sarkanus padarīsim visus nepāra li:

<ul>
	<li>saraksta vienība</li>
	<li>saraksta vienība</li>
	<li>saraksta vienība</li>
	<li>saraksta vienība</li>
	<li>saraksta vienība</li>
</ul>

li:nth-child(odd) {
	color: red;
}

Piemērs

Tagad sarkanus padarīsim katru trešo li (sākot no trešās):

<ul>
	<li>saraksta vienība</li>
	<li>saraksta vienība</li>
	<li>saraksta vienība</li>
	<li>saraksta vienība</li>
	<li>saraksta vienība</li>
</ul>

li:nth-child(3n) {
	color: red;
}

Piemērs

Selektorā var norādīt elementu diapazonu. Pieņemsim, ka jums ir saraksts no 20 elementiem un jāizvēlas elementi no 7 līdz 14 ieskaitot. To var izdarīt šādi:

<ol>
	<li>saraksta vienība</li>
	<li>saraksta vienība</li>
	<li>saraksta vienība</li>
	<li>saraksta vienība</li>
	<li>saraksta vienība</li>
	<li>saraksta vienība</li>
	<li>saraksta vienība</li>
	<li>saraksta vienība</li>
	<li>saraksta vienība</li>
	<li>saraksta vienība</li>
	<li>saraksta vienība</li>
	<li>saraksta vienība</li>
	<li>saraksta vienība</li>
	<li>saraksta vienība</li>
	<li>saraksta vienība</li>
	<li>saraksta vienība</li>
	<li>saraksta vienība</li>
	<li>saraksta vienība</li>
	<li>saraksta vienība</li>
	<li>saraksta vienība</li>
</ol>

li:nth-child(n+7):nth-child(-n+14) {
	color: red;
}