Med :nth-last-childvä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-childförutom att den väljer objekt som börjar längst ner i källordningen, inte högst upp.
Anta att vi har en lista med ett okänt antal objekt, och vi 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-child:
li ( background: slategrey; ) /* select the second-last item */ li:nth-last-child(2) ( background: lightslategrey; )Som du kan se :nth-last-childtar ett argument: detta kan vara ett enda heltal, nyckelorden "jämn" eller "udda" eller en formel. Om ett heltal anges väljs bara ett element - men nyckelorden eller en formel kommer att upprepas genom alla underordnade element och välja matchande element som liknar navigeringsobjekt i en matris i JavaScript. Nyckelorden "jämn" och "udda" är enkla (2, 4, 6 etc eller 1, 3, 5 respektive). 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:
Lyckligtvis behöver du inte alltid göra matte själv - det finns flera :nth-last-childtestare och generatorer där ute:
- CSS-Tricks Tester
- Lea Verous testare
Intressanta platser
:nth-last-childitererar genom element som börjar från botten av källordningen. Den enda skillnaden mellan den och:nth-childär att den senare itererar genom element som börjar från toppen av källordningen.- Den
:nth-last-childväljare är mycket likt:nth-last-of-type, men med en viktig skillnad: det är mindre specifik. I vårt exempel ovan skulle de producera samma resultat eftersom vi itererar endast överlielement, 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 i:nth-last-child-it kan välja vilket syskonelement som helst i ett arrangemang, inte bara element som anges före kolon.
Webbläsarstöd
| Krom | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Arbetar | 3.2+ | Arbetar | 9,5+ | 9+ | Arbetar | Arbetar |
:nth-last-childintroducerades 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.