:nth-child()

Wybiera elementy według pozycji wśród rodzeństwa: co drugi, co trzeci, pierwsze trzy albo wszystkie od siódmego.

Na tej stronie

Przykład
Definicja i zastosowanie
Składnia
Argumenty
Argumenty w praktyce
Więcej przykładów
Obsługa przeglądarek
Dobre praktyki
Powiązane hasła

Przykład

CSS

tbody tr:nth-child(even) {
  background: #18181b;
}

HTML przykładu

<style>
  table { width: 100%; border-collapse: collapse; font-size: 14px; }
  th, td { padding: 6px 10px; text-align: left; }
  th + th, td + td { text-align: right; }
  thead { color: #a1a1aa; }
</style>
<table>
  <thead><tr><th>Gracz</th><th>EXP</th></tr></thead>
  <tbody>
    <tr><td>Ania</td><td>1240</td></tr>
    <tr><td>Bartek</td><td>1180</td></tr>
    <tr><td>Celina</td><td>990</td></tr>
    <tr><td>Darek</td><td>870</td></tr>
  </tbody>
</table>

Podgląd

Definicja i zastosowanie

Pseudoklasa :nth-child() numeruje wszystkie dzieci rodzica, zaczynając od 1, i wybiera te, których numer pasuje do argumentu. Argumentem może być konkretna liczba (3), słowo odd (nieparzyste) albo even (parzyste) lub wzór An+B.

Wzór An+B czyta się tak: przeglądarka podstawia za n kolejno 0, 1, 2, 3… i wybiera elementy o numerach, które wyjdą. 2n+1 daje 1, 3, 5, czyli to samo co odd, 3n daje 3, 6, 9, a -n+3 daje 3, 2, 1, czyli pierwsze trzy elementy. Wyniki mniejsze od 1 są pomijane.

Tak jak :first-child, pseudoklasa liczy wszystkie elementy rodzica bez względu na znacznik i klasę. Selektor .card:nth-child(2) wybierze drugie dziecko, jeśli ma klasę card, a nie drugą kartę. Rozwiązuje to składnia :nth-child(2 of .card): najpierw zostają elementy pasujące do selektora po of, a dopiero potem są numerowane. Działa we wszystkich głównych przeglądarkach od 2023 roku.

Do liczenia od końca służy :nth-last-child(), a do liczenia tylko elementów tego samego znacznika :nth-of-type().

Składnia

:nth-child( <liczba> | odd | even | An+B [of <selektor>]? )

Argumenty

odd
1, 3, 5, 7, 9
Elementy nieparzyste. Klasyczne paski w tabelach i na listach.
even
2, 4, 6, 8, 10
Elementy parzyste, czyli to samo co wzór 2n.
3
3
Dokładnie trzecie dziecko rodzica.
3n
3, 6, 9
Co trzeci element, czyli numery będące wielokrotnością trójki.
3n+1
1, 4, 7, 10
Co trzeci, zaczynając od pierwszego. W siatce o trzech kolumnach to cała pierwsza kolumna.
-n+3
1, 2, 3
Pierwsze trzy elementy. Dla n = 0, 1, 2 wychodzi 3, 2, 1, a dalsze wyniki są mniejsze od 1 i odpadają.
n+7
7, 8, 9, 10
Od siódmego elementu do samego końca, ile by ich nie było.
2 of .hot
drugi z .hot
Najpierw zostają elementy z klasą hot (z żółtą ramką), potem są numerowane od 1. Wybrany jest element 4, drugi z nich.

Argument	Pasujące elementy	Opis
odd	1, 3, 5, 7, 9	Elementy nieparzyste. Klasyczne paski w tabelach i na listach.
even	2, 4, 6, 8, 10	Elementy parzyste, czyli to samo co wzór `2n`.
3	3	Dokładnie trzecie dziecko rodzica.
3n	3, 6, 9	Co trzeci element, czyli numery będące wielokrotnością trójki.
3n+1	1, 4, 7, 10	Co trzeci, zaczynając od pierwszego. W siatce o trzech kolumnach to cała pierwsza kolumna.
-n+3	1, 2, 3	Pierwsze trzy elementy. Dla n = 0, 1, 2 wychodzi 3, 2, 1, a dalsze wyniki są mniejsze od 1 i odpadają.
n+7	7, 8, 9, 10	Od siódmego elementu do samego końca, ile by ich nie było.
2 of .hot	drugi z .hot	Najpierw zostają elementy z klasą `hot` (z żółtą ramką), potem są numerowane od 1. Wybrany jest element 4, drugi z nich.

Argumenty w praktyce

odd

Elementy nieparzyste. Klasyczne paski w tabelach i na listach.

span:nth-child(odd) { background: #7c3aed; color: #fff; }

even

Elementy parzyste, czyli to samo co wzór 2n.

span:nth-child(even) { background: #7c3aed; color: #fff; }

Dokładnie trzecie dziecko rodzica.

span:nth-child(3) { background: #7c3aed; color: #fff; }

Co trzeci element, czyli numery będące wielokrotnością trójki.

span:nth-child(3n) { background: #7c3aed; color: #fff; }

3n+1

Co trzeci, zaczynając od pierwszego. W siatce o trzech kolumnach to cała pierwsza kolumna.

span:nth-child(3n+1) { background: #7c3aed; color: #fff; }

-n+3

Pierwsze trzy elementy. Dla n = 0, 1, 2 wychodzi 3, 2, 1, a dalsze wyniki są mniejsze od 1 i odpadają.

span:nth-child(-n+3) { background: #7c3aed; color: #fff; }

n+7

Od siódmego elementu do samego końca, ile by ich nie było.

span:nth-child(n+7) { background: #7c3aed; color: #fff; }

2 of .hot

Najpierw zostają elementy z klasą hot (z żółtą ramką), potem są numerowane od 1. Wybrany jest element 4, drugi z nich.

span:nth-child(2 of .hot) { background: #7c3aed; color: #fff; }

Więcej przykładów

Wyróżnienie podium w rankingu

CSS

.ranking li:nth-child(-n+3) {
  color: #fbbf24;
  font-weight: 700;
}

HTML przykładu

<ol class="ranking stage" style="display: grid; gap: 4px; margin: 0; padding: 10px 10px 10px 34px; color: #a1a1aa;">
  <li>Ania, 1240 EXP</li>
  <li>Bartek, 1180 EXP</li>
  <li>Celina, 990 EXP</li>
  <li>Darek, 870 EXP</li>
  <li>Ewa, 640 EXP</li>
</ol>

Podgląd

Wzór -n+3 zawsze wybiera pierwsze trzy miejsca, niezależnie od długości listy.

Obsługa przeglądarek

Szeroko dostępne

Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.

Chrome
Edge
Firefox
Safari

Dobre praktyki

Wzór łatwo sprawdzić w pamięci: podstaw za n liczby 0, 1, 2, 3 i zobacz, jakie numery wyjdą.
Pamiętaj, że liczone są wszystkie dzieci rodzica. Jeśli w środku mieszają się różne elementy, użyj :nth-of-type() albo składni of S.
Paski w tabelach (tr:nth-child(even)) to klasyczne zastosowanie: ułatwiają śledzenie wzrokiem długich wierszy.

Powiązane hasła

Widzisz błąd albo brakuje przykładu? Napisz do nas.

Darmowy kursPrzećwicz CSS w kursie HTML i CSSZadania z podpowiedziami, edytor kodu i postępy zapisywane na bieżąco.Zobacz kurs