: n-sista-av-typen - CSS-tricks

Med :nth-last-of-typeväljaren kan du välja ett eller flera element baserat på deras källordning enligt en formel. Det definieras i CSS Selectors nivå 3-specifikationen som en "strukturell pseudoklass", vilket innebär att den används för att utforma innehåll baserat på dess förhållande till föräldra- och syskonelement. Den fungerar på samma sätt som :nth-of-typeförutom att den väljer objekt som börjar längst ner i källordningen, inte högst upp.

Anta att vi har en oordnad lista och vill markera det näst sista objektet (i detta exakta exempel, det "fjärde objektet"):



First Item
Second Item
Third Item
Fourth Item
Fifth Item

I stället för att göra något som att lägga till en klass i listobjektet (t.ex. .highlight) kan vi använda :nth-last-of-type:

li ( background: slategrey; ) /* select the second-last item */ li:nth-last-of-type(2) ( background: lightslategrey; )

Som du kan se :nth-last-of-typetar ett argument: detta kan vara ett enda heltal, nyckelorden "jämn" eller "udda" eller en formel. Om ett heltal anges är endast ett element valt - men nyckelorden eller en formel kommer att upprepas genom alla underordnade element och välja matchande element - liknande navigeringsobjekt i en matris i JavaScript. Nyckelorden "jämn" och "udda" är enkla (2, 4, 6, etc eller 1, 3, 5 etc). Formeln är konstruerad med syntax an+b, där:

“A” är ett heltal
"N" är bokstavsbokstaven "n"
"+" Är en operatör och kan vara antingen "+" eller "-"
“B” är ett heltal och krävs om en operatör ingår i formeln

Det är viktigt att notera att denna formel är en ekvation, och den går igenom varje syskonelement och bestämmer vilken som ska väljas. "N" -delen av formeln, om den ingår, representerar en uppsättning av ökande positiva heltal (precis som att det går igenom en matris). I vårt ovanstående exempel valde vi vartannat element med formeln 2n, som fungerade för att varje gång ett element kontrollerades ökade "n" med ett (2 × 0, 2 × 1, 2 × 2, 2 × 3, etc). Om ett elements ordning matchar resultatet av ekvationen, blir den vald (2, 4, 6, etc). För en mer fördjupad förklaring av matematiken, läs den här artikeln.

För att illustrera ytterligare, här är några exempel på giltiga :nth-last-of-typeväljare:

Se pennan CSS-tricks:: n: a-last-of-type av Chris Coyier (@chriscoyier) på CodePen.

Lyckligtvis behöver du inte alltid göra matte själv - det finns flera :nth-last-of-typetestare och generatorer där ute:

CSS-Tricks Tester
Lea Verous testare

Intressanta platser

:nth-last-of-typeitererar genom element som börjar från botten av källordningen. Den enda skillnaden mellan den och :nth-of-typeär att den senare itererar genom element som börjar från botten av källordningen.
Den :nth-last-of-typeväljare är mycket likt :nth-last-child, men med en viktig skillnad: det är mer specifik. I vårt exempel ovan skulle de producera samma resultat eftersom vi itererar endast över lielement, men om vi itererade över en mer komplex grupp av syskon :nth-last-childskulle vi försöka matcha alla syskon, inte bara syskon av samma elementtyp. Detta avslöjar kraften hos :nth-last-of-type-it riktar sig mot en viss typ av element i ett arrangemang i förhållande till liknande syskon, inte alla syskon.

Webbläsarstöd

Krom	Safari	Firefox	Opera	IE	Android	iOS
Arbetar	3.2+	Arbetar	9,5+	9+	Arbetar	Arbetar

:nth-last-of-typeintroducerades i CSS Selectors Module 3, vilket innebär att gamla versioner av webbläsare inte stöder det. Modernt webbläsarsupport är dock oklanderligt och de nya pseudoväljarna används ofta i produktionsmiljöer. Om du behöver äldre webbläsarsupport, antingen polyfill för IE, eller använd dessa väljare på icke-kritiska sätt på en progressiv förbättring, vilket rekommenderas.