In de vorige lessen heb je geleerd wat CSS is en hoe je een extern stijlblad koppelt aan je HTML-pagina. Maar hoe weet de browser nu welk specifiek onderdeel op de pagina hij een bepaalde kleur, grootte of achtergrond moet geven?
Het antwoord is: CSS Selectors.
Een selector is het eerste deel van een CSS-regel. Het kiest of "selecteert" de HTML-elementen die je wilt vormgeven. In deze les leer je de vier belangrijkste selector-typen kennen: element-selectors, classes, ID's en gecombineerde selectors.
De simpelste selector is de element selector. Hiermee selecteer je direct een HTML-tag op basis van zijn naam (zoals <h1>, <p>, <a>, <img> of <body>).
Typ gewoon de naam van de HTML-tag zonder haakjes < > in je CSS-bestand.
/* Selecteert ALLE paragrafen (<p>) op de pagina */
p {
color: #334155;
font-size: 16px;
line-height: 1.5;
}
/* Selecteert ALLE h2-koppen op de pagina */
h2 {
color: #2563eb;
margin-top: 20px;
}
Wanneer gebruik je dit?
Gebruik element-selectors voor algemene basisstijlen die voor de hele website gelden (bijvoorbeeld het standaard lettertype op de body of de standaardkleur van alle titels).
.class-naam)Soms wil je niet alle alinea's op de pagina dezelfde stijl geven, maar slechts een specifieke groep. Denk aan een introductie-alinea die groter moet zijn, of een waarschuwingsblokje dat rood moet worden.
Daarvoor gebruiken we een class selector.
class="naam" toe aan het element..) direct gevolgd door de classnaam.<!-- HTML -->
<p>Dit is een gewone alinea.</p>
<p class="intro">Dit is de introductietekst, die valt extra op!</p>
<p class="foutmelding">Er is een fout opgetreden.</p>
/* CSS */
/* De punt (.) geeft aan dat dit om een class gaat */
.intro {
font-size: 20px;
font-weight: bold;
color: #0f172a;
}
.foutmelding {
color: #dc2626;
background-color: #fef2f2;
padding: 10px;
border: 1px solid #fca5a5;
}
Kenmerken van Classes:
* Herbruikbaar: Je mag dezelfde class op meerdere elementen op dezelfde pagina gebruiken.
* Meerdere classes: Eén HTML-element kan meerdere classes tegelijk hebben, gescheiden door een spatie (bijv. <button class="btn btn-primary">).
#id-naam)Het ID attribuut gebruik je om één enkel, uniek element op de pagina aan te wijzen. Waar een class bedoeld is voor groepen, is een ID bedoeld voor een uitzondering.
id="naam" toe aan één specifiek element.#) direct gevolgd door de ID-naam.<!-- HTML -->
<header id="hoofd-header">
<h1>Studio Viso</h1>
</header>
/* CSS */
/* Het hekje (#) geeft aan dat dit om een uniek ID gaat */
#hoofd-header {
background-color: #0f172a;
color: #ffffff;
padding: 30px;
}
Kenmerken van ID's:
* Uniek: Een id mag slechts 1 keer per HTML-pagina voorkomen!
* Geen twee elementen op dezelfde pagina mogen hetzelfde id delen.
| Type Selector | CSS Syntaxis | HTML Voorbeeld | Herbruikbaar? | Gebruik voor... |
|---|---|---|---|---|
| Element | p { ... } | <p>Tekst</p> | Ja | Algemene basisstijlen van tags. |
| Class | .opvallend { ... } | <p class="opvallend"> | Ja (Onbeperkt) | Stijlen die op meerdere plekken terugkomen. |
| ID | #hoofd-logo { ... } | <img id="hoofd-logo"> | Nee (Slechts 1x) | Eén uniek sleutelelement op de pagina. |
Wanneer je ingewikkeldere pagina's gaat maken, zijn losse selectors soms niet specifiek genoeg. CSS biedt daarom verschillende manieren om selectors te combineren.
,)Als je meerdere elementen exact dezelfde stijl wilt geven, hoef je de CSS-code niet te herhalen. Je kunt de selectors scheiden met een komma.
/* Alle h1, h2 en h3 koppen krijgen dezelfde kleur en lettertype */
h1, h2, h3 {
font-family: 'Poppins', sans-serif;
color: #1e293b;
}
)Met een spatie tussen twee selectors kies je een element dat binnenin een ander element staat (child/descendant).
<!-- HTML -->
<nav>
<a href="#">Link in de navigatie</a>
</nav>
<p>
<a href="#">Gewone link in een alinea</a>
</p>
/* CSS: Selecteert ALLEEN de <a>-tags die BINNENIN een <nav> staan */
nav a {
color: #ffffff;
text-decoration: none;
font-weight: bold;
}
De link in de <p> blijft onaangetast, enkel de link in de <nav> wordt gestyled!
Je kunt een class ook vastmaken aan een specifiek HTML-element om nog gerichter te stylen.
/* Selecteert ALLEEN paragrafen (<p>) met de class .highlight */
p.highlight {
background-color: #fef08a;
}
Wat gebeurt er als je in je CSS zegt dat een alinea blauw moet zijn, maar je geeft diezelfde alinea ook een class die zegt dat hij rood moet zijn?
CSS gebruikt hiervoor een puntensysteem dat we Specificiteit (Specificity) noemen. De meest specifieke selector wint altijd!
Rangorde van kracht (van zwak naar sterk):
1. Element Selector (p) --> 1 punt (Zwakste)
2. Class Selector (.tekst) --> 10 punten
3. ID Selector (#hoofd-tekst) --> 100 punten (Sterkste)
<p id="uniek" class="opvallend">Welke kleur krijg ik?</p>
p { color: black; } /* 1 punt */
.opvallend { color: blue; } /* 10 punten */
#uniek { color: red; } /* 100 punten -> WINT! Tekst wordt ROOD. */
Tip: Gebruik in de praktijk zo veel mogelijk Classes voor het vormgeven van je website. ID's zijn vaak té sterk, waardoor het later lastig wordt om stijlen te overschrijven!
h1, p) stylen alle standaard HTML-tags van dat type..naam) beginnen met een punt en zijn herbruikbaar op meerdere elementen.#naam) beginnen met een hekje en zijn uniek (maximaal 1x per pagina).h1, h2: Groeperen (zowel h1 als h2).nav a: Afstammeling (enkel a binnenin nav).