Met de :nth-last-childselector kunt u een of meer elementen selecteren op basis van hun bronvolgorde, volgens een formule. Het wordt in de CSS Selectors Level 3-specificatie gedefinieerd als een "structurele pseudo-klasse", wat betekent dat het wordt gebruikt om inhoud op te maken op basis van de relatie met ouder- en broer / zus-elementen. Het werkt hetzelfde als, :nth-childbehalve dat het items selecteert die onderaan de bronvolgorde beginnen, niet bovenaan.
Stel dat we een lijst hebben met een onbekend aantal items, en we willen het voorlaatste item markeren (in dit exacte voorbeeld het "vierde item"):
- First Item
- Second Item
- Third Item
- Fourth Item
- Fifth Item
In plaats van iets te doen als het toevoegen van een klasse aan het lijstitem (bijv. .highlight), Kunnen we gebruiken :nth-last-child:
li ( background: slategrey; ) /* select the second-last item */ li:nth-last-child(2) ( background: lightslategrey; )Zoals u kunt zien, :nth-last-childaccepteert een argument: dit kan een enkel geheel getal zijn, de trefwoorden "even" of "oneven", of een formule. Als een geheel getal is opgegeven, wordt slechts één element geselecteerd, maar de trefwoorden of een formule doorlopen alle onderliggende elementen van het bovenliggende element en selecteren overeenkomende elementen, vergelijkbaar met het navigeren door items in een array in JavaScript. Trefwoorden "even" en "oneven" zijn rechttoe rechtaan (respectievelijk 2, 4, 6 enz. Of 1, 3, 5). De formule is opgebouwd met behulp van de syntaxis an+b, waarbij:
- "A" is een geheel getal
- "N" is de letterlijke letter "n"
- "+" Is een operator en kan "+" of "-" zijn
- "B" is een geheel getal en is vereist als een operator in de formule is opgenomen
Het is belangrijk op te merken dat deze formule een vergelijking is en elk element op hetzelfde niveau doorloopt om te bepalen welke wordt geselecteerd. Het "n" -gedeelte van de formule, indien opgenomen, vertegenwoordigt een reeks oplopende positieve gehele getallen (net zoals itereren door een matrix). In ons bovenstaande voorbeeld hebben we elk tweede element met de formule geselecteerd 2n, wat werkte omdat elke keer dat een element werd gecontroleerd, "n" met één werd verhoogd (2 × 0, 2 × 1, 2 × 2, 2 × 3, enz.). Als de volgorde van een element overeenkomt met het resultaat van de vergelijking, wordt het geselecteerd (2, 4, 6, enz.). Lees dit artikel voor een meer diepgaande uitleg van de betrokken wiskunde.
Om verder te illustreren, volgen hier enkele voorbeelden van geldige :nth-last-of-typeselectors:
Gelukkig hoef je niet altijd zelf de wiskunde te doen - er zijn verschillende :nth-last-childtesters en generatoren beschikbaar:
- CSS-trucs-tester
- Lea Verou's tester
Nuttige Plaatsen
:nth-last-childitereert door elementen vanaf de onderkant van de bronvolgorde. Het enige verschil tussen en:nth-childis dat de laatste door elementen heen itereert vanaf de bovenkant van de bronvolgorde.- De
:nth-last-childselector lijkt erg op,:nth-last-of-typemaar met één cruciaal verschil: hij is minder specifiek. In ons bovenstaande voorbeeld zouden ze hetzelfde resultaat opleveren omdat we alleenlielementen itereren , maar als we itereren over een complexere groep broers en zussen,:nth-last-childzouden ze proberen om alle broers en zussen te matchen, niet alleen broers en zussen van hetzelfde elementtype. Dit onthult de kracht van:nth-last-child-it kan elk element op hetzelfde niveau in een arrangement selecteren, niet alleen elementen die vóór de dubbele punt zijn gespecificeerd.
Browser-ondersteuning
| Chrome | Safari | Firefox | Opera | D.W.Z | Android | iOS |
|---|---|---|---|---|---|---|
| Werken | 3.2+ | Werken | 9.5+ | 9+ | Werken | Werken |
:nth-last-childwerd geïntroduceerd in CSS Selectors Module 3, wat betekent dat oude versies van browsers dit niet ondersteunen. De moderne browserondersteuning is echter onberispelijk en de nieuwe pseudo-selectors worden veel gebruikt in productieomgevingen. Als u oudere browserondersteuning nodig heeft, gebruik dan polyfill voor IE, of gebruik deze selectors op niet-kritieke manieren, zoals progressieve verbetering, wat wordt aanbevolen.