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

Definition och användning

CSS :nth-last-of-type(n) pseudo-klasser används för att matcha underelement av ett specifikt typ som är det n varje element.

n kan vara ett nummer/index, ett nyckelord (odd eller even) eller en formel (t.ex. an + b).

Tips:Se :nth-last-child() pseudo-klasser används för att välja underelement som är det n ett underelement, oavsett dess typ.

Exempel

Exempel 1

Ange bakgrundsfärg för varje <p>-element som är det andra från slutet av dess förälderelement.

Samtidigt anger vi bakgrundsfärg för varje <li>-element som är den tredje från slutet av dess förälderelement:

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

Prova själv

Exempel 2

odd och even är en nyckelord som kan användas för att matcha underelement med jämna eller udda index (det första underelementets index är 1).

Här anger vi olika bakgrundsfärger för <p>-element med jämna och udda index:

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

Prova själv

Exempel 3

Använd formeln (an + b). Beskrivning: a betyder heltalsskritt, n är alla icke-negativa heltal som börjar vid 0, och b är en heltalsskift.

Här anger vi bakgrundsfärg för alla <p> och <li>-element med index som är multipel av 3:

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

Prova själv

CSS-syntax

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

Tekniska detaljer

Version: CSS3

Webbläsarstöd

De siffror i tabellen anger den första webbläsarversion som fullständigt stöder denna pseudoklass.

Chrome Edge Firefox Safari Opera
4.0 9.0 3.5 3.2 9.6