Selektor CSS nth-child: odd, even i wzory na przykładach

Dziś wracamy do podstaw CSS-a. W swoich artykułach często sięgam po selektory CSS nth-child.

I przy okazji zorientowałem się, że nigdy porządnie nie omówiłem podstaw selektorów css nth-child. nth-child to pseudoklasa CSS, która pozwala wybierać elementy.

Dziś przejdziemy przez możliwości tego potężnego selektora CSS na kilku przykładach.

Zacznijmy od kilku podstawowych selektorów css nth-child:

Możemy wskazać numer elementu, który chcemy wybrać. Powiedzmy, że chodzi o trzeci element listy.

.article-list li:nth-child(3) {
    	color: green;
}

<ul class="article-list">
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
	<li>Item 4</li>
	<li>Item 5</li>
</ul>

W efekcie na zielono jest tylko trzeci element

• Item 1
• Item 2
• Item 3
• Item 4
• Item 5

Selektor odd i even

Elementy o numerach parzystych albo nieparzystych wybieramy słowami odd i even.

.article-list-odd li:nth-child(odd) {
    	color: green;
}

<ul class="article-list-odd">
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
	<li>Item 4</li>
	<li>Item 5</li>
</ul>

W efekcie wybrane są tylko elementy nieparzyste:

• Item 1
• Item 2
• Item 3
• Item 4
• Item 5

a nth-child(even) daje wyniki parzyste:

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

• Item 1
• Item 2
• Item 3
• Item 4
• Item 5

Co x elementów

Selektorem nth-child, da się też wybierać co x-ty element. Powiedzmy, że chcemy trafić w co czwarty:

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

Teraz zaznaczony jest co 4. element potomny:

• Item 1
• Item 2
• Item 3
• Item 4
• Item 5
• Item 6
• Item 7
• Item 8
• Item 9

... li:nth-child(4n+1) {
	color: red;
}

A jeśli chcemy objąć również pierwszy element:

• Item 1
• Item 2
• Item 3
• Item 4
• Item 5
• Item 6
• Item 7
• Item 8
• Item 9

Albo drugi element:

... li:nth-child(4n+2) {
	color: red;
}

• Item 1
• Item 2
• Item 3
• Item 4
• Item 5
• Item 6
• Item 7
• Item 8
• Item 9
• Item 10

Zaznaczanie x pierwszych elementów

Możemy nawet użyć selektora, który bierze wszystkie znaczniki poza trzema pierwszymi elementami.

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

• Item 1
• Item 2
• Item 3
• Item 4
• Item 5
• Item 6
• Item 7
• Item 8
• Item 9
• Item 10

Zaznaczanie wszystkich elementów poza x pierwszymi

Możemy nawet użyć selektora, który bierze wszystkie znaczniki poza trzema pierwszymi elementami.

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

• Item 1
• Item 2
• Item 3
• Item 4
• Item 5
• Item 6
• Item 7
• Item 8
• Item 9
• Item 10

Zaznaczanie pierwszego albo ostatniego elementu

Pierwszy i ostatni element wybierzemy również przez:first-child i :last-child

... li:first-child {
	color: red;
}
... li:last-child {
	color: blue;
}

• Item 1
• Item 2
• Item 3

• Item 1
• Item 2
• Item 3

Możemy też dołożyć przesunięcie i sięgnąć po przedostatni element listy.

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

• Item 1
• Item 2
• Item 3
• Item 4
• Item 5

Łączenie selektorów

Selektory nth-child można też ze sobą łączyć!

Powiedzmy, że chcesz wziąć wszystkie elementy parzyste z list o numerach nieparzystych.

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

<ul>
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
	<li>Item 4</li>
	<li>Item 5</li>
</ul>
<ul>
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
	<li>Item 4</li>
	<li>Item 5</li>
</ul>
<ul>
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
	<li>Item 4</li>
	<li>Item 5</li>
</ul>

Podsumowanie

Mam nadzieję, że ten artykuł pomoże ci przy kodowaniu stron z pseudoklasą nth-child. Jeśli chcesz zobaczyć, jakie inne pseudoklasy CSS istnieją, zajrzyj do poniższych artykułów:

• pseudoklasa CSS :not
• pseudoklasa CSS :where
• pseudoklasa CSS :empty