CSS :nth-last-child() pseudoklass

Definition och användning

CSS :nth-last-child(n) Pseudoklasser används för att matcha varje element som är det n:te från slutet som barn till dess förälder, oavsett typ.

n kan vara ett nummer/index, ett nyckelord (udda eller jämng) an + b)

Tips:Se :nth-last-of-type() Pseudoklasser används för att välja element som är det n:te från slutet som barn till dess förälder, oavsett typ. n element.

Exempel

Exempel 1

Specificera bakgrundsfärgen för varje <p>-element som är den andra från slutet som barn till dess förälder:

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

Prova själv

Exempel 2

udda och jämng är en nyckelord som kan användas för att matcha element med index som är jämng eller udda.

Här specificerar vi olika bakgrundsfärger för <p>-element med index som är jämng eller udda från slutet:

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

Prova själv

Exempel 3

Använd formeln (an + bBeskrivning:a betyder ett heltalsskrid, n är alla icke-negativa heltal som börjar vid 0,b är ett heltalsoffset.

Här specificerar vi bakgrundsfärgen för alla <p>-element med index som är multipel av 3 från slutet:

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

Prova själv

CSS-syntaks

:nth-last-child(index | udda | jämng an+b) {
  css-uttryck;
}

Tekniska detaljer

Webbläsarstöd

Bordet numer i tabellen specificerar den första webbläsarversion som fullständigt stöder den pseudoklassen.