: n-de-laatste-van-type - CSS-trucs

Anonim

Met de :nth-last-of-typeselector 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-of-typebehalve dat het items selecteert die onderaan de bronvolgorde beginnen, niet bovenaan.

Stel dat we een ongeordende lijst hebben en het voorlaatste item willen 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-of-type:

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

Zoals u kunt zien, :nth-last-of-typeaccepteert 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 enz.). 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:

Zie de Pen CSS-Tricks:: nth-last-of-type door Chris Coyier (@chriscoyier) op CodePen.

Gelukkig hoef je niet altijd zelf de wiskunde te doen - er zijn verschillende :nth-last-of-typetesters en generatoren beschikbaar:

  • CSS-trucs-tester
  • Lea Verou's tester

Nuttige Plaatsen

  • :nth-last-of-typeitereert door elementen vanaf de onderkant van de bronvolgorde. Het enige verschil tussen en :nth-of-typeis dat de laatste door elementen heen itereert vanaf de onderkant van de bronvolgorde.
  • De :nth-last-of-typeselector lijkt erg op, :nth-last-childmaar met één cruciaal verschil: hij is specifieker. In ons bovenstaande voorbeeld zouden ze hetzelfde resultaat opleveren omdat we alleen lielementen 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 toont de kracht van :nth-last-of-type-it aan voor een bepaald type element in een arrangement met betrekking tot vergelijkbare broers en zussen, niet alle broers en zussen.

Browser-ondersteuning

Chrome Safari Firefox Opera D.W.Z Android iOS
Werken 3.2+ Werken 9.5+ 9+ Werken Werken

:nth-last-of-typewerd 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.