CSS :nth-last-child() pseudo-klasse

Definition og brug

CSS :nth-last-child(n) pseudo-klasser bruges til at matche hvert element som det sidste n-æt i deres forælders elementliste, uanset deres type.

n kan være et tal/index, et nøgleord (odd eller even）eller en formel (som an + b）。

Tip:Se :nth-last-of-type() pseudo-klasser bruges til at vælge elementer som den sidste n-æt i deres forælders elementliste, uanset deres type. n en element, der er en af n-ætets elementer.

Eksempel

Eksempel 1

Definer baggrundsfarve for hvert <p>-element, der er det anden sidste barn af sin forælder:

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

Prøv det selv

Eksempel 2

odd og even er en nøgleord, der kan bruges til at matche elementer med odd eller even indeks.

Her definerer vi forskellige baggrundsfarver for <p>-elementer med odd og even indeks som sidste index:

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

Prøv det selv

Eksempel 3

brug formelen (an + b）。Beskrivelse:a repræsenterer en heltalsstegforing, n er alle ikke-negative heltal fra 0开始,b er en heltalsforskydning.

Her definerer vi baggrundsfarve for alle <p>-elementer med indeks multiplum af 3 som sidste index:

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

Prøv det selv

CSS-syntaks

:nth-last-child(index | odd | even | an+b) {
  css-deklarationer;
}

Tekniske detaljer

Browserunderstøttelse

Tallene i tabellen angiver den første browserversion, der fuldt ud understøtter denne pseudo-klasse.