Псеўдаклас nth-child

Псеўдаклас nth-child выбірае элемент, які з'яўляецца n-ным нашчадкам бацькі.

Сінтаксіс

селектар:nth-child(лік | odd | even | выраз) {
	
}

Значэнні

Значэнне	Апісанне
лік	Дадатны лік пачынаючы з `1`. Задае нумар элемента, да якога мы хочам звярнуцца. Нумарацыя элементаў пачынаецца з `1`.
`odd`	Няцотныя элементы.
`even`	Цотныя элементы.
выраз	Можна складаць спецыяльныя выразы з літарай n, якая абазначае ўсе цэлыя лікі ад нуля (не ад адзінкі) да бясконцасці. Так, `2n` - значыць усе цотныя лікі (пачынаючы з другога). Як гэта зразумець? Падстаўляем у `n` паслядоўна лікі ад `0` і так далей: калі n = 0, то 2n дасць 0 - такого элемента няма (нумарацыя элементаў з 1), калі n = 1, то 2n дасць 2 - другі элемент, калі n = 2, 2n дае 4 - чацвёрты элемент. Калі напісаць 3n - гэта будзе кожны трэці элемент (пачынаючы з трэцяга), і так далей.

Прыклад

У гэтым прыкладзе мы зробім чырвонага колеру той li, які з'яўляецца 4-тым нашчадкам свайго бацькі:

<ul>
	<li>element спісу</li>
	<li>element спісу</li>
	<li>element спісу</li>
	<li>element спісу</li>
	<li>element спісу</li>
</ul>

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

Прыклад

Зараз чырвонымі зробім усе цотныя li:

<ul>
	<li>element спісу</li>
	<li>element спісу</li>
	<li>element спісу</li>
	<li>element спісу</li>
	<li>element спісу</li>
</ul>

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

Прыклад

Зараз чырвонымі зробім усе няцотныя li:

<ul>
	<li>element спісу</li>
	<li>element спісу</li>
	<li>element спісу</li>
	<li>element спісу</li>
	<li>element спісу</li>
</ul>

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

Прыклад

Зараз чырвонымі зробім кожны трэці li (пачынаючы з трэцяга):

<ul>
	<li>element спісу</li>
	<li>element спісу</li>
	<li>element спісу</li>
	<li>element спісу</li>
	<li>element спісу</li>
</ul>

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

Прыклад

У селектары можна паказаць дыяпазон элементаў. Дапусцім, у вас ёсць спіс з 20 элементаў і трэба выбраць элементы з 7 па 14 уключна. Гэта можна зрабіць вось так:

<ol>
	<li>element спісу</li>
	<li>element спісу</li>
	<li>element спісу</li>
	<li>element спісу</li>
	<li>element спісу</li>
	<li>element спісу</li>
	<li>element спісу</li>
	<li>element спісу</li>
	<li>element спісу</li>
	<li>element спісу</li>
	<li>element спісу</li>
	<li>element спісу</li>
	<li>element спісу</li>
	<li>element спісу</li>
	<li>element спісу</li>
	<li>element спісу</li>
	<li>element спісу</li>
	<li>element спісу</li>
	<li>element спісу</li>
	<li>element спісу</li>
</ol>

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