De CSS :nth-child() Selector begrijpen

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

De selector ondersteunt enkele basissleutelwoorden voor veelvoorkomende gevallen, maar biedt ook een krachtige syntaxis voor het matchen van patronen. Hiermee kunt u elementen selecteren op basis van regelmatige, herhalende patronen of complexere definities, op basis van uw behoeften.

De :nth-child() Selectorsyntaxis

Als een CSS pseudo-klasse selector, verschilt de syntaxis :nth-child() van andere selectors. Er is een argument nodig als patroon voor het matchen van elementen in een reeks broers en zussen:

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

De nadruk ligt vooral op de argumenten tussen haakjes. Deze argumenten definiëren de subset van elementen die moeten worden geselecteerd.

Trefwoordwaarden gebruiken voor veelvoorkomende gevallen

Deze selector kan twee zoekwoordwaarden bevatten: vreemd En zelfs. Ze zijn bijzonder nuttig voor het stylen van alternatieve rijen in een tabel.

Een eenvoudig geordende lijst is een ander goed voorbeeld van wanneer u deze zoekwoordwaarden kunt gebruiken:

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

De... gebruiken :nde-kind (oneven) selector, kunt u de kleur van elk alternatief item wijzigen:

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

Items beginnen bij index 1, dus het eerste item wordt rood weergegeven, vervolgens het derde, enzovoort:

Functionele notatie voor meer flexibiliteit

U kunt een enkel geheel getal gebruiken om een ​​afzonderlijk element te selecteren, zoals dit:

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

In dit geval komt de selector alleen overeen met het vierde item in de lijst:

Deze syntaxis is een speciaal geval van de meer algemene functionele syntaxis, die items selecteert die overeenkomen met een bepaald patroon. Deze syntaxis is:

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

In deze notatie A is de stapgrootte. Dit betekent het aantal keren dat de selector beweegt om het volgende item te selecteren. Hiermee kunt u elk ander item, elk derde item, enz. selecteren. B is het startpunt waar de selectie begint.

Neem bijvoorbeeld het argument 3n+1:

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

Hierdoor wordt de selectie gestart bij het eerste item en gaat daarna verder met elk derde item:

Vergelijk dit met de uitdrukking 3n+2:

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

Hiermee wordt nog steeds elk derde item geselecteerd, maar nu begint het vanaf het tweede item in de lijst:

Een ander interessant voorbeeld is :n-kind (n+3):

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

Deze selecteert elk item (n), beginnend bij het derde (+3). Het zal er als volgt uitzien:

Je kunt ook aftrekken gebruiken om bepaalde resultaten te bereiken:

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

In dit voorbeeld wordt nog steeds elk derde item geselecteerd, maar het begint bij de “minus eerste”. In feite betekent dit dat het het tweede item in de lijst selecteert, vervolgens het vijfde, enzovoort:

De van Syntaxis

Je kunt ook het trefwoord gebruiken van gevolgd door een keuzeschakelaar als argument in de :nth-child() selector. Met deze syntaxis kunt u de mogelijke items beperken waaruit het reguliere patroon selecteert.

Stel je bijvoorbeeld voor dat je opmaak ingewikkelder is dan het origineel:

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

Gebruik nu :nth-child om de even items te selecteren uit de set van items met een specifieke klasse:

.new {
font-weight: bold;
}
li:nth-child(evenof.new) {
color: red;
}

Merk op dat alleen de even vetgedrukte items rood zijn:

Bedenk ook hoe dit verschilt van li.nieuw: nde-kind (even) die zich op nieuwe elementen richt, maar alleen als ze gelijk zijn. In het bovenstaande voorbeeld zijn dit de items 2 en 6.

Werken met de :nth-child()-selector

U kunt unieke ontwerpen maken met de :nth-child() selector. U kunt kleurrijke websites maken en rijen en kolommen in gegevenstabellen markeren. Door het te combineren met andere CSS-selectors kunt u complexe lay-outs en ontwerpen maken.