Pseudoklasa nth-child

Pseudoklasa nth-child wybiera element, który jest n-tym potomkiem rodzica.

Składnia

selektor:nth-child(liczba | odd | even | wyrażenie) {
	
}

Wartości

Wartość	Opis
liczba	Dodatnia liczba zaczynając od `1`. Określa numer elementu, do którego chcemy się odwołać. Numeracja elementów zaczyna się od `1`.
`odd`	Elementy nieparzyste.
`even`	Elementy parzyste.
wyrażenie	Można tworzyć specjalne wyrażenia z literą n, która oznacza wszystkie liczby całkowite od zera (nie od jeden) do nieskończoności. Tak, `2n` - oznacza wszystkie parzyste liczby (zaczynając od drugiego). Jak to zrozumieć? Podstawiamy w `n` kolejno liczby od `0` i tak dalej: jeśli n = 0, to 2n da 0 - takiego elementu nie ma (numeracja elementów od 1), jeśli n = 1, to 2n da 2 - drugi element, jeśli n = 2, 2n daje 4 - czwarty element. Jeśli napisać 3n - to będzie każdy trzeci element (zaczynając od trzeciego), i tak dalej.

Przykład

W tym przykładzie zrobimy na czerwono ten li, który jest 4-tym potomkiem swojego rodzica:

<ul>
	<li>element listy</li>
	<li>element listy</li>
	<li>element listy</li>
	<li>element listy</li>
	<li>element listy</li>
</ul>

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

Przykład

Teraz zrobimy na czerwono wszystkie parzyste li:

<ul>
	<li>element listy</li>
	<li>element listy</li>
	<li>element listy</li>
	<li>element listy</li>
	<li>element listy</li>
</ul>

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

Przykład

Teraz zrobimy na czerwono wszystkie nieparzyste li:

<ul>
	<li>element listy</li>
	<li>element listy</li>
	<li>element listy</li>
	<li>element listy</li>
	<li>element listy</li>
</ul>

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

Przykład

Teraz zrobimy na czerwono każdy trzeci li (zaczynając od trzeciego):

<ul>
	<li>element listy</li>
	<li>element listy</li>
	<li>element listy</li>
	<li>element listy</li>
	<li>element listy</li>
</ul>

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

Przykład

W selektorze można określić zakres elementów. Załóżmy, że masz listę z 20 elementów i trzeba wybrać elementy od 7 do 14 włącznie. Można to zrobić w ten sposób:

<ol>
	<li>element listy</li>
	<li>element listy</li>
	<li>element listy</li>
	<li>element listy</li>
	<li>element listy</li>
	<li>element listy</li>
	<li>element listy</li>
	<li>element listy</li>
	<li>element listy</li>
	<li>element listy</li>
	<li>element listy</li>
	<li>element listy</li>
	<li>element listy</li>
	<li>element listy</li>
	<li>element listy</li>
	<li>element listy</li>
	<li>element listy</li>
	<li>element listy</li>
	<li>element listy</li>
	<li>element listy</li>
</ol>

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