Welke CSS selectors zijn er?

Met selectors bepaal je in CSS welke elementen je wilt opmaken. Er zijn verschillende soorten selectors, elk met een eigen manier om HTML-elementen te kiezen.

Belangrijkste basis-selectors:

1. Element selector

Selecteert alle elementen van een bepaald type.

p { color: blue; }

Alle <p>-tags worden blauw.

2. Class selector

Selecteert alle elementen met een bepaalde class.

.belangrijk { font-weight: bold; }

Alle elementen met class="belangrijk" worden vetgedrukt.

3. ID selector

Selecteert één element met een bepaalde id.

#hoofdtitel { font-size: 2rem; }

Het element met id="hoofdtitel" krijgt grotere tekst.

4. Groeperen van selectors

Meerdere selectors tegelijk dezelfde stijl geven.

h1, h2, h3 { font-family: Arial; }

5. Nesten (descendant selector)

Een element binnen een ander element selecteren.

nav a { text-decoration: none; }

Alle links binnen <nav> worden zonder onderstreping getoond.

Veelgemaakte fouten

• Verkeerde notatie: vergeet niet . voor class en # voor id.
• Alles met id stylen: gebruik liever class voor herbruikbare stijlen.
• Te algemene selectors: p {…} verandert alle paragrafen – wees soms specifieker.