Filter een set onderliggende elementen vooraf voordat u An+B-logica erop toepast.
De pseudo-klasse selectoren :nth-last-child() :nth-child() () en :nth-last-child()
Met de pseudo-klasseselector :nth-child() kunt u elementen in de DOM selecteren op basis van hun index. Met de An+B microsyntaxis krijgt u nauwkeurige controle over welke elementen u wilt selecteren.
-
:nth-child(2): Selecteer het 2e kind. -
:nth-child(2n): Selecteert alle even kinderen (2e, 4e, 6e, 8e, enzovoort) . -
:nth-child(2n+1): Selecteert alle oneven kinderen (1e, 3e, 5e, 7e, enzovoort) . -
:nth-child(5n+1): Selecteer het 1e (=(5×0)+1) , 6e (=(5×1)+1) , 11e (=(5×2)+1) , … kind. -
:nth-child(5n+2): Selecteer het 2e (=(5×0)+2) , 7e (=(5×1)+2) , 12e (=(5×2)+2) , … kind.
Maar er zijn meer creatieve keuzes mogelijk als u de A parameter weglaat. Bijvoorbeeld:
-
:nth-child(n+3): Selecteer elk kind vanaf het 3e kind (3e, 4e, 5e, enzovoort) . -
:nth-child(-n+5): Selecteert elk kind tot en met het 5e (1e, 2e, 3e, 4e, 5e) .
Combineer een paar van deze :nth-child() selecties en u kunt bereiken van elementen selecteren:
-
:nth-child(n+3):nth-child(-n+5): Selecteer elk kind van het 3e tot en met het 5e (3e, 4e, 5e) .
Met behulp van :nth-last-child() kunt u soortgelijke selecties maken, maar in plaats van te beginnen met tellen vanaf het begin, begint u te tellen vanaf het einde.
Selecties vooraf filteren met de of S syntaxis
Nieuw in CSS Selectors Level 4 is de mogelijkheid om optioneel een selectorlijst door te geven aan :nth-child() en :nth-last-child() .
:nth-child(An+B [of S]?) :nth-last-child(An+B [of S]?) Wanneer of S is opgegeven, wordt de An+B logica alleen toegepast op elementen die voldoen aan de opgegeven selectorlijst S Dit betekent in feite dat u kinderen kunt voorfilteren voordat An+B zijn werk doet.
Browser Support
Voorbeelden
Bijvoorbeeld, :nth-child(2 of .highlight) selecteert het tweede overeenkomende element met de klasse .highlight . Met andere woorden: selecteer de tweede van alle kinderen met de klasse .highlight .
Dit in tegenstelling tot .highlight:nth-child(2) dat het element selecteert dat de klasse .highlight heeft en ook het tweede kind is.
In de onderstaande demo ziet u dit verschil:
- Het element dat overeenkomt met
:nth-child(2 of .highlight)heeft een roze omtrek. - Het element dat overeenkomt met
.highlight:nth-child(2)heeft een groene omtrek.
Merk op dat S een selectorlijst is, wat betekent dat het meerdere selectors accepteert, gescheiden door een komma. Bijvoorbeeld, :nth-child(4 of .highlight, .sale) selecteert het vierde element dat .highlight of .sale is uit een set van 'siblings'.
In de onderstaande demo is er een oranje omtreklijn toegepast op het element dat overeenkomt met :nth-child(4 of .highlight, .sale) .
Zebrastrepen, opnieuw bekeken
Een klassiek voorbeeld waarbij :nth-child() wordt gebruikt, is bij het aanmaken van een tabel met zebrastrepen. Het is een visuele techniek waarbij elke tabelrij van kleur wisselt. Normaal gesproken wordt dit als volgt aangepakt:
tr:nth-child(even) { background-color: lightgrey; } Hoewel dit prima werkt voor statische tabellen, wordt het problematisch wanneer u de tabelinhoud dynamisch gaat filteren. Wanneer bijvoorbeeld rij twee verborgen wordt, blijven rij één en drie zichtbaar, elk met dezelfde achtergrondkleur.
Om dit te verhelpen, kunnen we gebruikmaken van :nth-child(An+B [of S]?) door de verborgen rijen uit te sluiten van de An+B logica:
tr:nth-child(even of :not([hidden])) { background-color: lightgrey; } Best wel leuk, toch?
Foto door Markus Spiske op Unsplash