Pseudoklasas nth-child

Pseudoklasas nth-child parenka elementą, kuris yra n-tasis tėvinio elemento palikuonis.

Sintaksė

selektorius:nth-child(skaičius | odd | even | išraiška) {
	
}

Reikšmės

Reikšmė	Aprašas
skaičius	Teigiamas skaičius pradedant `1`. Nurodo elemento, prie kurio norime kreiptis, numerį. Elementų numeracija prasideda nuo `1`.
`odd`	Nelyginiai elementai.
`even`	Lyginiai elementai.
išraiška	Galima sudaryti specialias išraiškas su raide n, kuri žymi visus sveikuosius skaičius nuo nulio (ne nuo vieneto) iki begalybės. Taigi, `2n` - reiškia visus lyginius skaičius (pradedant antruoju). Kaip tai suprasti? Į `n` paeiliui įrašome skaičius nuo `0` ir toliau: jei n = 0, tai 2n duos 0 - tokio elemento nėra (elementų numeracija nuo 1), jei n = 1, tai 2n duos 2 - antrasis elementas, jei n = 2, 2n duoda 4 - ketvirtasis elementas. Jei parašysite 3n - tai bus kas trečias elementas (pradedant trečiuoju), ir taip toliau.

Pavyzdys

Šiame pavyzdyje mes padarysime raudonos spalvos tą li, kuris yra 4-tasis savo tėvinio elemento palikuonis:

<ul>
	<li>sąrašo elementas</li>
	<li>sąrašo elementas</li>
	<li>sąrašo elementas</li>
	<li>sąrašo elementas</li>
	<li>sąrašo elementas</li>
</ul>

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

Pavyzdys

Dabar raudonais padarysime visus lyginius li:

<ul>
	<li>sąrašo elementas</li>
	<li>sąrašo elementas</li>
	<li>sąrašo elementas</li>
	<li>sąrašo elementas</li>
	<li>sąrašo elementas</li>
</ul>

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

Pavyzdys

Dabar raudonais padarysime visus nelyginius li:

<ul>
	<li>sąrašo elementas</li>
	<li>sąrašo elementas</li>
	<li>sąrašo elementas</li>
	<li>sąrašo elementas</li>
	<li>sąrašo elementas</li>
</ul>

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

Pavyzdys

Dabar raudonais padarysime kas trečią li (pradedant trečiuoju):

<ul>
	<li>sąrašo elementas</li>
	<li>sąrašo elementas</li>
	<li>sąrašo elementas</li>
	<li>sąrašo elementas</li>
	<li>sąrašo elementas</li>
</ul>

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

Pavyzdys

Selektoriuje galima nurodyti elementų diapazoną. Tarkime, jūs turite sąrašą iš 20 elementų ir reikia pasirinkti elementus nuo 7 iki 14 imtinai. Tai galima padaryti štai taip:

<ol>
	<li>sąrašo elementas</li>
	<li>sąrašo elementas</li>
	<li>sąrašo elementas</li>
	<li>sąrašo elementas</li>
	<li>sąrašo elementas</li>
	<li>sąrašo elementas</li>
	<li>sąrašo elementas</li>
	<li>sąrašo elementas</li>
	<li>sąrašo elementas</li>
	<li>sąrašo elementas</li>
	<li>sąrašo elementas</li>
	<li>sąrašo elementas</li>
	<li>sąrašo elementas</li>
	<li>sąrašo elementas</li>
	<li>sąrašo elementas</li>
	<li>sąrašo elementas</li>
	<li>sąrašo elementas</li>
	<li>sąrašo elementas</li>
	<li>sąrašo elementas</li>
	<li>sąrašo elementas</li>
</ol>

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