CSS :nth-last-of-type() pseudo-klass
- Föregående sida :nth-last-child()
- Nästa sida :nth-of-type()
- Gå tillbaka till föregående nivå CSS pseudo-class reference manual
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; }
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; }
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; }
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 |
- Föregående sida :nth-last-child()
- Nästa sida :nth-of-type()
- Gå tillbaka till föregående nivå CSS pseudo-class reference manual