Pseudoklass nth-child

Pseudoklass nth-child valib elemendi, mis on vanema n-s laps.

Süntaks

valija:nth-child(arv | odd | even | avaldis) {
	
}

Väärtused

Väärtus	Kirjeldus
arv	Positiivne arv alates `1`. Määrab elemendi järjekorranumbri, millele soovime viidata. Elementide nummerdamine algab `1`-st.
`odd`	Paaritud elemendid.
`even`	Paaris elemendid.
avaldis	Saab koostada spetsiaalseid avaldisi tähega n, mis tähistab kõiki täisarve nullist (mitte ühest) lõpmatuseni. Seega `2n` tähendab kõiki paaris arve (alates teisest). Kuidas seda mõista? Asendame `n`-s järjest arvud alates `0` ja nii edasi: kui n = 0, siis 2n annab 0 - sellist elementi pole (elementide nummerdamine algab 1-st), kui n = 1, siis 2n annab 2 - teine element, kui n = 2, 2n annab 4 - neljas element. Kui kirjutada 3n - see on iga kolmas element (alates kolmandast), ja nii edasi.

Näide

Selles näites teeme punaseks selle li, mis on oma vanema 4-s laps:

<ul>
	<li>listi element</li>
	<li>listi element</li>
	<li>listi element</li>
	<li>listi element</li>
	<li>listi element</li>
</ul>

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

Näide

Nüüd teeme punaseks kõik paaris li:

<ul>
	<li>listi element</li>
	<li>listi element</li>
	<li>listi element</li>
	<li>listi element</li>
	<li>listi element</li>
</ul>

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

Näide

Nüüd teeme punaseks kõik paaritud li:

<ul>
	<li>listi element</li>
	<li>listi element</li>
	<li>listi element</li>
	<li>listi element</li>
	<li>listi element</li>
</ul>

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

Näide

Nüüd teeme punaseks iga kolmanda li (alates kolmandast):

<ul>
	<li>listi element</li>
	<li>listi element</li>
	<li>listi element</li>
	<li>listi element</li>
	<li>listi element</li>
</ul>

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

Näide

Valijas saab määrata elementide vahemiku. Oletame, et teil on 20-st elemendist koosnev loetelu ja on vaja valida elemendid alates 7 kuni 14 (kaasa arvatud). Seda saab teha nii:

<ol>
	<li>listi element</li>
	<li>listi element</li>
	<li>listi element</li>
	<li>listi element</li>
	<li>listi element</li>
	<li>listi element</li>
	<li>listi element</li>
	<li>listi element</li>
	<li>listi element</li>
	<li>listi element</li>
	<li>listi element</li>
	<li>listi element</li>
	<li>listi element</li>
	<li>listi element</li>
	<li>listi element</li>
	<li>listi element</li>
	<li>listi element</li>
	<li>listi element</li>
	<li>listi element</li>
	<li>listi element</li>
</ol>

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