Pseudoklasa CSS :nth-last-child()

Definicja i użycie

CSS :nth-last-child(n) Pseudoklasa służy do dopasowania każdego elementu będącego n-tym dzieckiem ostatnim w stosunku do rodzica, niezależnie od jego typu.

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

Wskazówka:Zobacz :nth-last-of-type() Pseudoklasa służy do wyboru każdego elementu będącego n-tym dzieckiem ostatnim w stosunku do rodzica, niezależnie od jego typu. n elementu.

Przykład

Przykład 1

Przypisujemy kolor tła dla każdego elementu <p>, który jest drugim dzieckiem ostatniego rodzica:

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

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.

Tutaj przypisujemy różne kolory tła dla elementów <p> o indeksie ujemnym będącym nieparzystym lub parzystym:

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

Spróbuj sam

Przykład 3

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

Tutaj przypisujemy kolor tła dla wszystkich elementów <p> o indeksie ujemnym będącym wielokrotnością 3:

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

Spróbuj sam

Gramatyka CSS

:nth-last-child(indeks | nieparzysty | parzysty | an+b) {
  dla deklaracji css;
}

Szczegóły techniczne

Wsparcie przeglądarek

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