Pseudoklasa CSS :nth-last-of-type()

Definicja i użycie

CSS :nth-last-of-type(n) pseudoklasa używana do dopasowania jako ostatniego elementu potomnego określonego typu w stosunku do rodzica: n każdego elementu.

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

Wskazówka:Zobacz :nth-last-child() pseudoklasa używana do wyboru jako ostatniego elementu potomnego określonego typu w stosunku do rodzica: n każdego elementu potomnego, niezależnie od jego typu.

Przykład

Przykład 1

Przypisujemy kolor tła do elementów <p>, które są drugim elementem od końca w stosunku do ich rodzica <p>.

Również przypisujemy kolor tła do elementów <li>, które są trzecim elementem od końca w stosunku do ich rodzica <li>:

p:nth-last-of-type(2) {
  background: red;
}
li:nth-last-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 parzystych lub nieparzystych (indeks pierwszego elementu to 1).

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

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

Spróbuj sam

Przykład 3

Opis formuły (an + b). a oznacza całkowity krok, n to wszystkie nieujemne liczby całkowite zaczynające się od 0, b to przesunięcie całkowite.

W tym miejscu przypisujemy kolor tła do wszystkich elementów <p> i <li>, które mają indeks ujemny podzielny przez 3:

p:nth-last-of-type(3n) {
  background: red;
}
li:nth-last-of-type(3n) {
  background: yellow;
}

Spróbuj sam

Gramatyka CSS

:nth-last-of-type(indeks | nieparzysty | parzysty | an+b) {
  deklaracje css;
}

Szczegóły techniczne

Obsługa przeglądarek

Tabela zawiera wersje przeglądarek, które w pełni obsługuje ten pseudoklasę.