Meer elementen selecteren css op basis van hun bronvolgorde formule:nth-of-type selector

Logo cursus traing wordpress

Meer elementen selecteren css op basis van hun bronvolgorde formule:nth-of-type selector

Met de :nth-of-type selector kun je een of meer elementen selecteren op basis van hun bronvolgorde, volgens een formule. Het is gedefinieerd in de CSS Selectors Level 3 spec als een “structurele pseudoklasse”, wat betekent dat het wordt gebruikt om inhoud te stylen op basis van de relatie met bovenliggende en verwante elementen.

Stel dat we een ongeordende lijst hebben en we willen afwisselende lijstitems “zebra-strepen”:

  • First Item
  • Second Item
  • Third Item
  • Fourth Item
  • Fifth Item

In plaats van klassen toe te voegen aan elk lijstitem (bijvoorbeeld .even & .odd) kunnen we :nth-of-type gebruiken:

li {
  background: #e2e2e2;
}
/* select alternating items starting with the second item */
li:nth-of-type(2n) {
  background: #f2f2f2;
}

Zoals je kunt zien, neemt :nth-of-type een argument: dit kan een enkel geheel getal zijn, de trefwoorden “even” of “oneven”, of een formule zoals hierboven getoond. Als een geheel getal wordt opgegeven, wordt slechts één element geselecteerd, maar de trefwoorden of een formule zullen alle kinderen van het bovenliggende element doorlopen en overeenkomende elementen selecteren – vergelijkbaar met het navigeren door items in een array in . Trefwoorden “even” en “odd” zijn eenvoudig, maar de formule wordt geconstrueerd met de syntaxis an+b, waarbij:

“a” een geheel getal is
“n” de letterlijke letter “n” is
“+” een operator is en “+” of “-” kan zijn
“b” een geheel getal is en vereist is als een operator is opgenomen in de formule.

Het is belangrijk op te merken dat deze formule een vergelijking is en iteratief elk sibling-element doorloopt om te bepalen welk geselecteerd wordt. Het “n”-gedeelte van de formule, indien opgenomen, vertegenwoordigt een reeks oplopende positieve gehele getallen (net als itereren door een matrix). In ons bovenstaande voorbeeld selecteerden we elk tweede element met de formule 2n, wat werkte omdat elke keer dat een element werd gecontroleerd, “n” met één toenam (2×0, 2×1, 2×2, 2×3, enzovoort). Als de volgorde van een element overeenkomt met het resultaat van de vergelijking, wordt het geselecteerd (2, 4, 6, enzovoort). Lees dit artikel voor een diepgaandere uitleg van de wiskunde.

Ter illustratie volgen hier enkele voorbeelden van geldige :nth-of-type selectors:

See the Pen CSS-Tricks: :nth-of-type by Zachary Kain (@zakkain) on CodePen.


Meer weten over Meer elementen selecteren css op basis van hun bronvolgorde formule:nth-of-type selectorof info?

Wil je meer informatie? Veel bezoekers met interesse in Meer elementen selecteren css op basis van hun bronvolgorde formule:nth-of-type selector bekeken ook de onderstaande handleidingen:


Training of cursus CSS en html

Snel CSS en html leren

Leer hoe je je WordPress website beter en kan maken en beheren in de html-css training op maat:
CSS en HTML-cursus voor WordPress

WP Bootcamp spoedopleiding

Leer hoe je je WordPress website sneller kan maken en ontwerpen in de WP Bootcamp spoedopleiding:
WordPress Bootcamp spoedopleiding

Info over Meer elementen selecteren css op basis van hun bronvolgorde formule:nth-of-type selector?

Neem contact op met Arthur als je nog vragen hebt over ontwerp, Meer elementen selecteren css op basis van hun bronvolgorde formule:nth-of-type selector en WordPress web-development.

WP developer

Arthur Wentzel, web-designer

06 20 83 05 83

Scroll naar boven