CSS :nth-of-type() pseudoklasa

Definicja i użycie

CSS :nth-of-type(n) pseudoklasa używana do dopasowania elementów jako potomków tego samego typu (nazwy etykiety) wewnątrz elementu nadrzędnego n każdego elementu potomnego.

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

Wskazówka:Zobacz :nth-child() pseudoklasa używana do wyboru jako potomka elementu o numerze indeksu n elementów potomnych, niezależnie od ich typu.

Przykład

Przykład 1

Jak używać :nth-of-type() Wybieracz:

/* Wybiera drugi element braci div */
div:nth-of-type(2) {
  background: red;
}
/* Wybiera drugi element li w liście */
li:nth-of-type(2) {
  background: jasnozielony;
}
/* Wybiera każdy trzeci element w każdej grupie braci */
:nth-of-type(3) {
  background: yellow;
}

Spróbuj sam

Przykład 2

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

Tutaj przypisujemy różne kolory tła do elementów <p> o nieparzystych i parzystych indeksach:

p:nth-of-type(odd) {
  background: red;
}
p:nth-of-type(even) {
  background: blue;
}

Spróbuj sam

Przykład 3

używając formuły (an + b)a oznacza całkowity krok, n to wszystkie nieujemne liczby całkowite zaczynające się od 0,b jest całkowitym offsetem.

Tutaj przypisujemy kolor tła do wszystkich elementów <p> o indeksie wielokrotnym 3 (wybieramy trzeci, szósty, dziewiąty itp. element):

p:nth-of-type(3n+0) {
  background: red;
}

Spróbuj sam

Przykład 4

Tutaj przypisujemy kolor tła do wszystkich elementów <p> o indeksie wielokrotnym 3. Następnie odejmujemy 1 (wybieramy drugi, piąty, ósmy itp. element):

p:nth-of-type(3n-1) {
  background: red;
}

Spróbuj sam

Gramatyka CSS

:nth-of-type(indeks | 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ę.