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”:

<ul>
  <li>First Item</li>
  <li>Second Item</li>
  <li>Third Item</li>
  <li>Fourth Item</li>
  <li>Fifth Item</li>
</ul>

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 JavaScript. 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.