Псевдоклас nth-child

Псевдоклас nth-child одабира елемент, који је n-ти потомак родитеља.

Синтакса

селектор:nth-child(број | odd | even | израз) {
	
}

Вредности

Вредност	Опис
број	Позитиван број почeв од `1`. Одређује редни број елемента којем желимо да приступимо. Нумерација елемената почиње од `1`.
`odd`	Непарни елементи.
`even`	Парни елементи.
израз	Могуће је саставити специјалне изразе са словом n, које означава све целе бројеве од нуле (не од јединице) до бесконачности. Дакле, `2n` значи све парне бројеве (почeв од другог). Како то разумети? Заменујемо у `n` редом бројеве од `0` и тако даље: ако је n = 0, онда 2n даје 0 - такав елемент не постоји (нумерација елемената од 1), ако је n = 1, онда 2n даје 2 - други елемент, ако је n = 2, 2n даје 4 - четврти елемент. Ако напишемо 3n - то ће бити сваки трећи елемент (почeв од трећег), и тако даље.

Пример

У овом примеру ћемо учинити црвене боје онај li елемент који је 4-ти потомак свог родитеља:

<ul>
	<li>ставка листе</li>
	<li>ставка листе</li>
	<li>ставка листе</li>
	<li>ставка листе</li>
	<li>ставка листе</li>
</ul>

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

Пример

Сада ћемо учинити црвеним све парне li елементе:

<ul>
	<li>ставка листе</li>
	<li>ставка листе</li>
	<li>ставка листе</li>
	<li>ставка листе</li>
	<li>ставка листе</li>
</ul>

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

Пример

Сада ћемо учинити црвеним све непарне li елементе:

<ul>
	<li>ставка листе</li>
	<li>ставка листе</li>
	<li>ставка листе</li>
	<li>ставка листе</li>
	<li>ставка листе</li>
</ul>

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

Пример

Сада ћемо учинити црвеним сваку трећу li ставку (почeв од треће):

<ul>
	<li>ставка листе</li>
	<li>ставка листе</li>
	<li>ставка листе</li>
	<li>ставка листе</li>
	<li>ставка листе</li>
</ul>

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

Пример

У селектору је могуће навести опсег елемената. Рецимо, имате листу од 20 елемената и треба одабрати елементе од 7 до 14 укључујући. То се може учинити овако:

<ol>
	<li>ставка листе</li>
	<li>ставка листе</li>
	<li>ставка листе</li>
	<li>ставка листе</li>
	<li>ставка листе</li>
	<li>ставка листе</li>
	<li>ставка листе</li>
	<li>ставка листе</li>
	<li>ставка листе</li>
	<li>ставка листе</li>
	<li>ставка листе</li>
	<li>ставка листе</li>
	<li>ставка листе</li>
	<li>ставка листе</li>
	<li>ставка листе</li>
	<li>ставка листе</li>
	<li>ставка листе</li>
	<li>ставка листе</li>
	<li>ставка листе</li>
	<li>ставка листе</li>
</ol>

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