Odwiedzając naszą stronę, zgadzasz się na naszą politykę prywatności dotyczącą plików cookie, śledzenia statystyk itp.

Pseudoklasa CSS :nth-child()

> Dodaj do ulubionych

Pseudoklasa CSS :nth-child() odnosi się do elementów na podstawie ich położenia w hierarchii drzewa dokumentu. Wybiera element o określonym numerze lub elementy o określonych numerach z grupy przystających do siebie elementów tego samego typu.

Zaczyna odliczanie od pierwszego elementu z grupy. Używa się jej na przykład do naprzemiennego kolorowania wierszy tabeli, formatowania wybranych elementów list i wielu innych celów.

Składnia i przykłady :nth-child

Składnia pseudoklasy :nth-child:

:nth-child(odd | even | an+b [of S])

Pseudoklasa :nth-child obsługuje dwa rodzaje składni: z selektorem z przodu lub z selektorem po słowie kluczowym of w nawiasie, np. obie poniższe formy są równoważne, ale druga z nich została wprowadzona dopiero w specyfikacji selektorów CSS4.


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

Pseudoklasa :nth-child() przyjmuje dwa rodzaje wartości: słowo kluczowe lub specjalny wzór an+b.

Słowa kluczowe

Pseudoklasa :nth-child obsługuje dwa słowa kluczowe:

  • odd: oznacza elementy o numerach nieparzystych, np.:
    li:nth-child(odd) {color: red}

    Co drugi element listy, zaczynając od pierwszego, będzie miał czerwony kolor tekstu.

  • even: oznacza elementy o numerach parzystych
    li:nth-child(even) {color: red}

    Co drugi element listy, zaczynając od drugiego, będzie miał czerwony kolor tekstu.

Wzór an+b

Drugim rodzajem wartości pseudoklasy :nth-child() jest wartość skonstruowana według wzoru an + b, określająca które elementy z zakresu obejmowanego przez pseudoklasę mają zostać wybrane. Znaczenie poszczególnych elementów tego wzoru:

  • a: liczba całkowita określająca wartość skoku, tzn. wskazująca co który element ma być wybierany.
  • b: liczba całkowita określająca numer pierwszego elementu spośród obejmowanej przez selektor grupy, który ma zostać wybrany. Inaczej mówiąc, ta wartość określa numer pierwszego wybranego elementu.
  • n: reprezentuje kolejne liczby całkowite, zaczynając od 0. Jest to automatyczny mnożnik pozwalający obliczać kolejne numery elementów do wyboru po podstawieniu konkretnych wartości do wzoru. Ten parametr pozostaje w niezmienionej postaci, tzn. użytkownik nie zamienia go na żadną wartość – jego wartości są automatycznie kolejno podstawiane przez przeglądarkę podczas wykonywania obliczeń.

Jeśli parametrowi a nadamy wartość 2, a parametrowi b nadamy wartość 3, to otrzymamy wzór 2n + 3. Zgodnie z opisem w powyższej liście taka wartość pseudoklasy :nth-child będzie powodowała wybór co drugiego elementu, zaczynając od trzeciego elementu, np.:

<style>
  li:nth-child(2n+3) {color: red}
</style>
…
<ol> 
  <li>Punkt 1</li> 
  <li>Punkt 2</li> 
  <li>Punkt 3</li> 
  <li>Punkt 4</li> 
  <li>Punkt 5</li> 
  <li>Punkt 6</li> 
  <li>Punkt 7</li> 
  <li>Punkt 8</li> 
  <li>Punkt 9</li> 
  <li>Punkt 10</li> 
  <li>Punkt 11</li> 
  <li>Punkt 12</li>
</ol>

W tym przypadku czerwony kolor tekstu będą miały punkty o numerach 3 (wartość parametru b wskazuje, że wybieranie ma się zacząć od trzeciego elementu), 5, 7, 9 i 11 (wartość parametru a wskazuje, że wybierany ma być co drugi element).

Efekt działania pseudoklasy :nth-child

A teraz powiedzmy, że mamy taką regułę CSS:

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

Ten selektor zacząłby wybieranie od czwartego elementu i wybrałby wszystkie pozostałe elementy („co pierwszy”), czyli czerwony kolor tekstu miałyby wszystkie elementy powyższej listy od czwartego do dwunastego.

Numery elementów, które zostaną wybrane, można obliczyć wprost ze wzoru, podstawiając do niego odpowiednie wartości. Jeśli na przykład mamy wzór 3n+4 i tabelę zawierającą 16 wierszy, to numery wierszy, które zostaną wybrane obliczymy następująco:

  1. W pierwszym kroku wartość n wynosi 0, więc po podstawieniu jej do wzoru otrzymujemy: 3 × 0 + 4 = 4. To znaczy, że pierwszy zostanie wybrany element o numerze czwartym. Zgadza się to z tym, co widzimy bezpośrednio we wzorze (wartość parametru b wynosi 4).
  2. W drugim kroku wartość n wynosi 1, więc po podstawieniu jej do wzoru otrzymujemy: 3 × 1 + 4 = 7. To znaczy, że jako drugi zostanie wybrany element o numerze 7. To też zgadza się z naszymi przewidywaniami, które możemy wysnuć na podstawie wyglądu wzoru: zaczynamy od czwartego elementu, a następnie wybieramy co trzeci, więc najpierw wybieramy 4. element, potem 7. element, następnie 10. element itd. Sprawdźmy, czy dalej też się zgadza.
  3. W trzecim kroku wartość n wynosi 2, więc po podstawieniu jej do wzoru otrzymujemy: 3 × 2 + 4 = 10. Nasze przewidywania się sprawdziły.
  4. W czwartym kroku wartość n wynosi 3, więc po podstawieniu jej do wzoru otrzymujemy: 3 × 3 + 4 = 13. To był ostatni krok, ponieważ wszystkich elementów w naszej tabeli jest 16, a kolejny wybrany miałby numer 17.

Dodatkowe uwagi

  • Ujemna wartość parametru a

    Parametr a może mieć wartość ujemną i wtedy „odliczanie” odbywa się w odwrotną stronę, tzn. od elementu o numerze wskazanym przez parametr b ku pierwszemu w krokach określonych przez człon an, np.:

    :nth-child(-3n + 9)

    Ten selektor wybierze element 9., a następnie 6. i 3. Oczywiście można to obliczyć przed podstawienie odpowiednich wartości do wzoru an+b.

  • Ujemna wartość parametru b

    Parametr b także może mieć wartość ujemną. W takim przypadku należy opuścić znak + i użyć znaku -:

    :nth-child(2n-1) /* To jest poprawny zapis */
:nth-child(2n+-1) /* To jest niepoprawny zapis */

  • Zerowa wartość parametru a

    Kiedy parametr a ma wartość 0, to można opuścić człon an i znak + (jeśli parametr b jest ujemny, to powinien być poprzedzony znakiem -) i wówczas selektor wybiera tylko jeden element –– ten o numerze wskazywanym przez parametr b, np.:

    :nth-child(0n+3) /* To jest poprawny zapis – wybiera trzeci element */
:nth-child(3) /* To jest poprawna uproszczona wersja powyższego zapisu – wybiera trzeci element */

  • Zerowa wartość parametru b

    Kiedy parametr b ma wartość 0, to można go opuścić i wybierane są elementy w odstępie co a, np.:

    :nth-child(2n+0) /* Wybiera co drugi element */
:nth-child(2n) /* Uproszczona forma powyższego zapisu */

  • Wartość 1 lub -1 parametru a

    Kiedy parametr a ma wartość 1 lub -1, to liczbę 1 można opuścić, np.:

    :nth-child(1n+3)   /* Wybiera wszystkie elementy, zaczynając od trzeciego */
:nth-child(n+3)    /* Prostsza wersja powyższego zapisu */

Zobacz również