: n-kind - CSS-trucs

Met de :nth-childselector kunt u een of meer elementen selecteren op basis van hun bronvolgorde, volgens een formule.

/* Select the first list item */ li:nth-child(1) ( ) /* Select the 5th list item */ li:nth-child(5) ( ) /* Select every other list item starting with first */ li:nth-child(odd) ( ) /* Select every 3rd list item starting with first */ li:nth-child(3n - 2) ( ) /* Select every 3rd list item starting with 2nd */ li:nth-child(3n - 1) ( ) /* Select every 3rd child item, as long as it has class "el" */ .el:nth-child(3n) ( )

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.

Stel dat we een CSS-raster aan het bouwen zijn en de marge op elke vierde rastermodule willen verwijderen. Hier is die HTML:

 One Two Three Four Five 

In plaats van een klasse toe te voegen aan elk vierde item (bijv. .last), Kunnen we gebruiken :nth-child:

.module:nth-child(4n) ( margin-right: 0; )

De :nth-childselector heeft een argument: dit kan een getal, de zoekwoorden even, oddof 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 JavaScript-array. Trefwoorden "even" en "oneven" zijn rechttoe rechtaan (respectievelijk 2, 4, 6, etc. 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 vierde element met de formule geselecteerd 4n, wat werkte omdat elke keer dat een element werd gecontroleerd, "n" met één werd verhoogd (4 × 0, 4 × 1, 4 × 2, 4 × 3, enz.). Als de volgorde van een element overeenkomt met het resultaat van de vergelijking, wordt het geselecteerd (4, 8, 12, enz.). Lees dit artikel voor een meer diepgaande uitleg van de betrokken wiskunde.

Om verder te illustreren, volgen hier enkele voorbeelden van geldige :nth-childselectors:

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

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

: n-kind (an + b van)

Er is een weinig bekend filter waaraan kan worden toegevoegd :nth-childvolgens de CSS Selectors-specificatie: de mogelijkheid om :nth-childeen subset van elementen te selecteren met behulp van het of formaat. Stel dat u een lijst met gemengde inhoud heeft: sommige hebben de klas .video, sommige hebben de klas .pictureen u wilt de eerste 3 afbeeldingen selecteren. U kunt dit als volgt doen met het filter "van":

:nth-child(-n+3 of .picture) ( /* Selects the first 3 elements applied not to ALL children but only to those matching .picture */ )

Merk op dat dit iets anders is dan een selector rechtstreeks aan de :nth-childselector toevoegen:

.picture:nth-child(-n+3) ( /* Not the same! This applies to elements matching .picture which _also_ match :nth-child(-n+3) */ )

Dit kan een beetje verwarrend zijn, dus een voorbeeld kan het verschil illustreren:

Browserondersteuning voor het "of" -filter is zeer beperkt: op het moment van schrijven ondersteunde alleen Safari de syntaxis. Om de status van uw favoriete browser te controleren, volgen hier openstaande problemen met betrekking tot :nth-child(an+b of s):

• Firefox: ondersteuning voor n-kind (An + B van sel)
• Chrome: Implementeren: n-kind (an + b van S)

Nuttige Plaatsen

• :nth-childitereert door elementen vanaf de bovenkant van de bronvolgorde. Het enige verschil tussen en :nth-last-childis dat de laatste door elementen heen itereert vanaf de onderkant van de bronvolgorde.
• De syntaxis voor het selecteren van het eerste naantal elementen is een beetje contra-intuïtief. U begint met -n, plus het positieve aantal elementen dat u wilt selecteren. Zo li:nth-child(-n+3)zal de eerste 3 selecteren lielementen.
• De :nth-childselector lijkt erg op, :nth-of-typemaar met één cruciaal verschil: hij is minder specifiek. In ons bovenstaande voorbeeld zouden ze hetzelfde resultaat opleveren omdat we alleen .moduleelementen itereren , maar als we itereren over een complexere groep broers en zussen, :nth-childzouden ze proberen om alle broers en zussen te matchen, niet alleen broers en zussen van hetzelfde elementtype. Dit onthult de kracht van :nth-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
Ieder	3.2+	Ieder	9.5+	9+	Ieder	Ieder

:nth-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.