CSS :nth-last-of-type() pseudo-klasse

Definition og brug

CSS :nth-last-of-type(n) pseudo-klasser bruges til at matche elementer, der er som den sidste element af en bestemt type i deres forældre element. n hver element i en underelement sekvens.

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

Tip:Se :nth-last-child() pseudo-klasser bruges til at vælge elementer, der er som den sidste element af en bestemt type i deres forældre element. n en underelements element, uanset dens type.

Eksempel

Eksempel 1

Angiv baggrundsfarve for <p>-elementer, der er anden sidste element i deres forældres <p>-element.

Samtidig har vi angivet baggrundsfarve for <li>-elementer, der er tredje sidste element i deres forældre <li>-element.

p:nth-last-of-type(2) {
  baggrund: rød;
}
li:nth-last-of-type(3) {
baggrund: gul;
}

Prøv det selv

Eksempel 2

odd og even er en nøgleord, som kan bruges til at matche underelementer med odd eller even indeks (den første underelements indeks er 1).

Her har vi angivet forskellige baggrundsfarver for <p>-elementer med odd og even indeks:

p:nth-last-of-type(odd) {
  baggrund: rød;
}
p:nth-last-of-type(even) {
  baggrund: blå;
}

Prøv det selv

Eksempel 3

Brug formelen (an + b). Beskrivelse: a er en heltalssteg, n er alle ikke-negative heltal fra 0, og b er en heltalsforskydning.

Her har vi angivet baggrundsfarve for alle <p> og <li>-elementer, hvor den sidste indeks er multiplum af 3:

p:nth-last-of-type(3n) {
  baggrund: rød;
}
li:nth-last-of-type(3n) {
  baggrund: gul;
}

Prøv det selv

CSS-syntaks

:nth-last-of-type(index | odd | even | an+b) {
  css-udtryk;
}

Tekniske detaljer

Browserunderstøttelse

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