CSS Fundamentals

CSS Selectors: Precies kiezen wat je wilt opmaken

Ontdek hoe je de juiste elementen selecteert met CSS. Van basis selectors tot geavanceerde combinaties — alles wat je moet weten.

8 min leestijd Beginner Februari 2026

Laptopscherm met CSS-stylesheet open in een editor met kleurvariabelen zichtbaar

Waarom CSS Selectors belangrijk zijn

CSS selectors zijn het hart van styling. Ze bepalen welke HTML-elementen je aanpast en hoe je die aanpakt. Zonder goed begrip van selectors zul je veel tijd verspillen met het zoeken naar waarom je CSS niet werkt zoals verwacht.

Je hebt waarschijnlijk al gezien hoe je met een klasse elementen kunt selecteren. Maar dat’s slechts het begin. Er zijn tientallen manieren om elementen te selecteren — en elk heeft zijn eigen voordelen en gebruikscases.

We gaan je alles uitleggen wat je moet weten. Van eenvoudige element-selectors tot complexe attribute-selectors. Dit gaat je tijd besparen en je code veel beter maken.

Close-up van CSS-code met gekleurde selectors en properties op een donkere code-editor achtergrond

Visualisatie van basis CSS-selectors met kleuren gecodeerd naar selectie-types

De vier basis selectors

Er zijn vier soorten selectors die je vrijwel elke dag gaat gebruiken. Deze vormen de basis van al je styling.

Element selector Selecteert alle elementen van een bepaald type. Bijvoorbeeld p selecteert alle paragrafen.

Class selector Selecteert elementen met een bepaalde class. Je gebruikt een punt: .highlight selecteert alle elementen met class=”highlight”.

ID selector Selecteert één uniek element met een bepaalde ID. Je gebruikt een hekje: #header selecteert het element met id=”header”.

Attribute selector Selecteert elementen op basis van hun attributen. Bijvoorbeeld input[type="text"] selecteert alle tekstvelden.

In de praktijk zul je class-selectors het meest gebruiken. Ze’re flexibel, herbruikbaar en veel beter dan IDs.

Combinators: Elementen in relatie selecteren

Zodra je de basis beheerst, wordt het interessant. Combinators laten je elementen selecteren op basis van hun relatie tot andere elementen. Dit is waar je echt controle krijgt.

Er zijn vier soorten combinators die je kennen moet. Ze werken allemaal iets anders en hebben elk hun eigen toepassingen.

Child combinator (>) selecteert direct onderliggende elementen. ul > li selecteert alleen li’s die direct in een ul zitten.

Descendant combinator (spatie) selecteert alle geneste elementen. div p selecteert alle p’s die ergens in een div zitten, op welk niveau ook.

Adjacent sibling (+) selecteert het volgende element van hetzelfde niveau. h2 + p selecteert de eerste p die direct na een h2 komt.

General sibling (~) selecteert alle volgende elementen van hetzelfde niveau. h2 ~ p selecteert alle p’s die ergens na een h2 komen.

Diagram van CSS-combinators met voorbeelden van parent-child en sibling-relaties tussen HTML-elementen

Scherm met interactive demo van pseudo-classes zoals :hover en :focus in een web-browser

Pseudo-classes en pseudo-elementen

Dit zijn de toverwoorden van CSS. Pseudo-classes laten je elementen selecteren op basis van hun staat. Pseudo-elementen creëren virtuele elementen die je kunt stylen.

Ze beginnen allebei met een dubbele punt, maar ze werken heel anders. Pseudo-classes beschrijven de staat van een element. Pseudo-elementen zijn virtuele elementen die je kan stylen.

Veelgebruikte pseudo-classes

:hover — wanneer de muis erover gaat
:focus — wanneer het element focus heeft
:nth-child(2n) — elk tweede kind
:last-child — het laatste kind
:not(.class) — alles behalve deze class

Veelgebruikte pseudo-elementen

::before — voegt content vóór in
::after — voegt content erachter in
::first-letter — de eerste letter
::selection — geselecteerde tekst
::placeholder — placeholder-tekst

Praktische tips voor dagelijks gebruik

Dit zijn de dingen die je echt helpen in real-world projecten.

Je hebt nu veel informatie gehad. Hier zijn de praktische tips die je werkelijk zullen helpen. Dit zijn de dingen die je leven makkelijker maken.

Specificity begrijpen

Specificity bepaalt welke CSS-regel wint. Element (1) < Class (10) < ID (100). Vermijd IDs — ze maken je code moeilijk aan te passen.

Classes voor styling gebruiken

Classes zijn de werkpaard van CSS. Ze’re herbruikbaar, flexibel en makkelijk aan te passen. Dit is de manier waarop professionals het doen.

Wees voorzichtig met child selectors

De child combinator (>) is nuttig, maar te veel nesting maakt je CSS fragiel. Houd het simpel en flexibel.

Combineer selectors strategisch

Je kan selectors combineren voor meer kracht. .button.primary selecteert elementen met beide classes. Dit geeft je fijnere controle.

Tekstscherm met goed georganiseerde CSS-selectors met duidelijke naamgeving en structuur

Je bent klaar om CSS selectors onder de knie te krijgen

Je hebt nu geleerd hoe je elementen selecteert met CSS. Van basis selectors tot combinators en pseudo-classes. Dit zijn de tools die je elke dag gaat gebruiken.

Het belangrijkste is om te oefenen. Schrijf wat code, experimenteer met selectors en zie wat werkt. Doe dit enkele keren en het zal tweede natuur worden. Selectors zijn niet moeilijk — je moet ze alleen toepassen.

De volgende stap? Leer over specificity en hoe je je CSS effectief kan organiseren. Maar dat is voor een volgende keer. Voor nu: ga oefenen!

Bekijk meer tutorials

Disclaimer

Deze gids is informatief en is bedoeld om je te helpen CSS selectors te begrijpen. De technieken en voorbeelden zijn gebaseerd op standaard CSS-specificaties. Implementatie kan varië ren afhankelijk van je browser en omgeving. Test altijd je code in meerdere browsers voor compatibiliteit.