De CSS-selector :nth-child() begrijpen

Zoals alle CSS selectors kun je :nth-child() gebruiken om elementen in een webpagina te identificeren en er stijlen op toe te passen. Maar met deze selector kun je een set broers en zussen beperken op basis van hun relatieve positie.

De selector biedt zowel fundamentele trefwoordopties als een geavanceerde patroongebaseerde syntaxis om aan verschillende vereisten te voldoen. Je kunt kiezen uit eenvoudige selecties die zich houden aan terugkerende patronen of ingewikkelde specificaties gebruiken om aan je specifieke eisen te voldoen.

De :nth-child() selectiesyntax

Als een CSS pseudo-class selector onderscheidt de :nth-child() syntaxis zich van andere selectors door een argument te nemen dat dient als een patroon voor het identificeren van elementen binnen een groep van sibling-elementen.

 :nth-child(args) {
    /*...*/
} 

De primaire nadruk ligt op de inhoud tussen haakjes, die een specifieke subset van elementen afbakent waaruit moet worden gekozen.

Sleutelwoordwaarden gebruiken voor veelvoorkomende gevallen

Deze selector is ontworpen om te werken met twee verschillende sleutelwoordwaarden, namelijk “oneven” en “even”. Deze waarden blijken zeer effectief te zijn als het gaat om het implementeren van alternatieve rijstijlen in een tabel.

Een eenvoudige opsomming dient ter illustratie van een omstandigheid waarin je deze trefwoordaanduidingen kunt gebruiken:

 <ol>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
    <li>Item 7</li>
</ol> 

Met behulp van de selector :nth-child(odd) kan de tint van elk volgende lijstitem met een oneven index worden gewijzigd:

 :nth-child(odd) {
    color: red;
} 

De items zijn genummerd vanaf 1, zodat het eerste item wordt weergegeven in een rode kleur, gevolgd door het derde item, en vervolgens elk daaropvolgend derde item.

Functionele notatie voor meer flexibiliteit

Men kan een enkel positief geheel getal gebruiken om een specifieke component te kiezen door het als volgt te gebruiken:

 li:nth-child(4) {
    color: red;
} 

In dit geval is de selector uitsluitend van toepassing op het vierde element in de opgegeven lijst:

Dit specifieke geval van syntaxis heeft betrekking op het selecteren van elementen op basis van een specifiek patroon en valt onder de bredere categorie van functionele syntaxes die deze functie uitvoeren.

 :nth-child(An\\+B) {
    /*...*/
} 

In deze specifieke notatie duiden we met “A” de toename of stapgrootte aan, die de frequentie aangeeft waarmee de selecteur vooruitgaat om het volgende item te kiezen. Met deze aanpak kun je ervoor kiezen om items met regelmatige tussenpozen te selecteren, zoals om de andere of om de derde, enzovoort.Omgekeerd staat “B” voor het beginpunt van waaruit de selectie begint.

Neem bijvoorbeeld het argument 3n\+1:

 li:nth-child(3n\\+1) {
    color: red;
} 

Het selectieproces wordt gestart vanaf het eerste element, waarna twee elementen worden overgeslagen en naar het volgende volgende element wordt gegaan:

Vergelijk dit met de uitdrukking 3n\+2:

 li:nth-child(3n\\+2) {
    color:red;
} 

De bijgewerkte code begint met het selecteren van items vanaf het tweede element van de lijst in plaats van te beginnen bij het eerste, terwijl het patroon van het kiezen van elk derde element gehandhaafd blijft.

Een ander interessant voorbeeld is :nth-child(n\+3):

 li:nth-child(n\\+3) {
    color: red;
} 

De gegeven instructie heeft betrekking op het selecteren van een reeks items, waarbij het begint met het derde element en doorgaat tot het einde. De resulterende reeks moet de hieronder afgebeelde vorm hebben:

Men kan ook het proces van aftrekken toepassen om specifieke resultaten te bereiken.

 li:nth-child(3n-1) {
    color: red;
} 

Het gegeven voorbeeld wijkt af van conventionele praktijken door het selectieproces te starten vanaf de negatieve index, wat resulteert in de keuze van het tweede element in de reeks, gevolgd door de vijfde en volgende termen:

De van Syntaxis

De :nth-child() pseudo-klasse staat het gebruik toe van het sleutelwoord “van” vergezeld van een selector, die als argument binnen de haakjes dient. Door deze syntaxis te gebruiken, kan het bereik van elementen waaruit het fundamentele patroon kan selecteren worden beperkt, waardoor de specificiteit en precisie van het selectieproces worden verhoogd.

Beschouw een scenario waarin de opmaak ingewikkeld is vergeleken met de oorspronkelijke versie:

 <ol>
    <li class="old">Item 1</li>
    <li class="new">Item 2</li>
    <li class="new">Item 3</li>
    <li class="old">Item 4</li>
    <li class="new">Item 5</li>
    <li class="new">Item 6</li>
    <li class="new">Item 7</li>
</ol> 

Om elementen met een specifieke klasse te selecteren en elk tweede item binnen die groep met CSS te selecteren, kun je de pseudoklasse “:nth-child” gebruiken in combinatie met de gewenste klasseselector. Hierdoor kunnen specifieke elementen nauwkeurig worden geselecteerd en aangepast op basis van hun positie binnen de reeks van gematchte elementen.

 .new {
    font-weight: bold;
}

li:nth-child(even of.new) {
    color: red;
} 

Merk op dat alleen de oneven vetgedrukte items in rood verschijnen:

Denk bovendien na over het verschil tussen li.new:nth-child(even) en :target , selectors die respectievelijk .new elementen targeten als ze even zijn of een child-element bevatten met een ID van “moredetails”, zoals aangetoond in ons vorige voorbeeld. Het eerste geldt voor instanties 2 en 6 in de gegeven illustratie.

Werken met de :nth-child() selector

Het gebruik van de :nth-child() selector maakt het mogelijk om onderscheidende esthetieken te genereren door het implementeren van levendige tinten in website-inhoud, inclusief het accentueren van afzonderlijke rijen en kolommen binnen gegevensstructuren in tabellen. Bovendien vergemakkelijkt de integratie van deze selector met aanvullende CSS-selectors de constructie van ingewikkelde visuele schema’s en configuraties door gebruik te maken van hun gecombineerde mogelijkheden.