CSS :nth-child() pseudo-klasa

Definicja i użycie

CSS :nth-child(n)}} pseudoklasa używana do dopasowania elementu jako n elementów potomka

ten pseudoklasa dopasowuje elementy na podstawie ich indeksu w liście potomków elementu nadrzędnego.

n może być liczbą/indeksem, słowem kluczowym (nieparzysty lub parzysty) lub formułę (np. an + b)

Wskazówka:Zobacz :nth-of-type() pseudoklasa służy do wyboru elementu jakotego samego typu (nazwa tagu)elementu n elementów potomka.

Przykład

Przykład 1

Jak używać :nth-child() Pseudoklasa:

/* Wybiera każdy czwarty element z grupy braci */
:nth-child(4) {
  background-color: yellow;
}
/* Wybiera drugi element z braci div */
div:nth-child(2) {
  background-color: red;
}
/* Wybiera drugi element li z listy */
li:nth-child(2) {
  background-color: lightgreen;
}

Spróbuj sam

Przykład 2

nieparzysty i parzysty jest słowem kluczowym, które można użyć do dopasowania elementów o indeksie nieparzystym lub parzystym (indeks pierwszego elementu potomka wynosi 1).

Tutaj, dla elementów <p> o nieparzystym i parzystym indeksie przypisujemy różne kolory tła:

p:nth-child(odd) {
  background-color: red;
}
p:nth-child(even) {
  background: lightgreen;
}

Spróbuj sam

Przykład 3

używając formuły (an + b) Opis:a oznacza całkowitą liczbę kroków, n to wszystkie nieujemne liczby całkowite zaczynające się od 0,b jest całkowitą liczbą przesunięcia.

Tutaj, dla wszystkich elementów <p> o indeksie będącym wielokrotnością 3 przypisujemy kolor tła (wybieramy trzeci, szósty, dziewiąty itp. elementy):

p:nth-child(3n+1) {
  background-color: red;
}

Spróbuj sam

Przykład 4

Tutaj, dla wszystkich elementów <p> o indeksie będącym wielokrotnością 3 przypisujemy kolor tła. Następnie odjąć 1 (wybieramy pierwszy, czwarty, siódmy itp. elementy):

p:nth-child(3n-1) {
  background-color: red;
}

Spróbuj sam

Gramatyka CSS

:nth-child(index | nieparzysty | parzysty | an+b) {
  deklaracje css;
}

Szczegóły techniczne

Obsługa przeglądarek

Liczby w tabeli wskazują na pierwszą wersję przeglądarki, która w pełni obsługuje ten pseudoklasę.