CSS Les 2: Selectors

Home›CSS-track›Les 2

🎯 Selectors

⏱ Geschatte leestijd: 25 minuten · 7 stappen

Een selector bepaalt welk HTML-element je wilt stijlen. In les 1 zag je de basis: h1 { color: teal; }. In deze les leer je alle selectortypen — van element en klasse tot pseudo-classes die reageren op muisbewegingen.

1 Element-selector

De eenvoudigste selector: schrijf de tagnaam. Alle elementen van dat type krijgen de stijl.

Element-selector — stijlt elk element van dat type

h1 { color: teal; }        /* alle h1's */
p  { font-size: 1rem; }    /* alle p's */
a  { text-decoration: none; } /* alle links */

/* Meerdere elementen tegelijk — komma als scheidingsteken */
h1, h2, h3 {
  font-family: Arial, sans-serif;
  color: #1a202c;
}

Wat betekent dit?

De komma (,) combineert selectors. h1, h2, h3 { ... } betekent: pas dezelfde stijl toe op h1, h2 én h3. Dit voorkomt code-herhaling.

2 Klasse-selector en ID-selector

Klasse- en ID-selectors laten je specifieke elementen targetten, ongeacht hun type.

Klasse-selector (.naam)

/* CSS: punt vóór de naam */
.kaart {
  background: white;
  padding: 16px;
  border-radius: 8px;
}

/* Meerdere klassen op één element */
.btn.groot {
  font-size: 1.2rem;
}

ID-selector (#naam)

/* CSS: hekje vóór de naam */
#header {
  background: #1a202c;
  padding: 24px;
}

/* In HTML: id="header"
   — elk id is uniek op een pagina */

Klasse (.)

Herbruikbaar — meerdere elementen mogen dezelfde klasse hebben. Gebruik je het vaakst.

ID (#)

Uniek — elk ID mag maar één keer per pagina voorkomen. Gebruik je voor specifieke elementen.

3 Descendant en child selectors

Je kunt selectors combineren op basis van de HTML-structuur.

Structuur-selectors

/* Descendant (spatie): elke a BINNEN nav, op elk niveau */
nav a {
  color: white;
  text-decoration: none;
}

/* Child (>): alleen DIRECTE kinderen van ul */
ul > li {
  list-style: none;
  padding: 8px;
}

/* Combinaties zijn mogelijk */
.kaart p {
  color: gray;  /* elke p in een .kaart */
}

header nav a:hover {
  color: teal;  /* link in nav in header bij hover */
}

Descendant (spatie)

nav a — alle a-elementen die ergens binnen nav staan, ook genest.

Child (>)

ul > li — alleen li-elementen die direct kind zijn van ul, niet dieper genest.

4 Attribute selectors

Selecteer elementen op basis van hun HTML-attributen en -waarden.

Attribute selectors — tussen blokhaken

/* Elk element MET het attribuut href */
[href] { color: blue; }

/* Alleen inputs van type "text" */
input[type="text"] {
  border: 2px solid teal;
  padding: 8px;
}

/* Links die beginnen met https */
a[href^="https"] {
  color: green;
}

/* Afbeeldingen die eindigen op .png */
img[src$=".png"] {
  border-radius: 8px;
}

💡 Handig voor formulieren: input[type="text"], input[type="email"] en input[type="submit"] kunnen elk een eigen stijl krijgen zonder extra klassen.

5 Pseudo-classes

Pseudo-classes selecteren elementen op basis van hun toestand of positie.

Pseudo-classes — beginnen met een dubbele punt

/* Toestand-pseudo-classes */
a:hover  { color: teal; }          /* muiscursor erover */
a:focus  { outline: 2px solid teal; } /* via Tab geselecteerd */
button:active { transform: scale(0.98); } /* ingedrukt */

/* Positie-pseudo-classes */
li:first-child { font-weight: bold; }   /* eerste li */
li:last-child  { border-bottom: none; } /* laatste li */
li:nth-child(2) { background: #f0f0f0; } /* tweede li */
li:nth-child(odd)  { background: #fafafa; } /* oneven */
li:nth-child(even) { background: white; }   /* even */

/* :not() — alles behalve */
li:not(:last-child) { border-bottom: 1px solid #eee; }

Wat betekent dit?

Pseudo-klasse = een "nep"-klasse die de browser automatisch toekent op basis van toestand of positie. Je schrijft hem niet in HTML — de browser berekent hem zelf. :hover is de meestgebruikte.

6 Oefening 1: Selectors in de praktijk

Opdracht:

✓ Gebruik nav a (descendant selector) om de links een color te geven

✓ Stijl de klasse .kaart met een background-color en padding

✓ Stijl het element met id="speciaal" met een border

✓ Voeg een :hover effect toe aan nav a

editor

<!DOCTYPE html>
<html lang="nl">
<head>
  <meta charset="UTF-8">
  <style>
    /* Schrijf hier je CSS */

  </style>
</head>
<body style="font-family: Arial; background: #f5f5f5; margin: 0;">
  <nav style="background: #1a202c; padding: 12px 20px;">
    <a href="#">Home</a>
    <a href="#" style="margin-left:16px">Over</a>
    <a href="#" style="margin-left:16px">Contact</a>
  </nav>

  <main style="padding: 20px;">
    <div class="kaart">
      <h2>Project Alpha</h2>
      <p>Een geweldig project.</p>
    </div>

    <div class="kaart" id="speciaal">
      <h2>Project Beta</h2>
      <p>Het uitgelichte project.</p>
    </div>
  </main>
</body>
</html>

Live preview

7 Oefening 2: Pseudo-classes

Opdracht:

✓ Geef li:first-child een andere achtergrondkleur

✓ Geef li:nth-child(even) een lichte achtergrond

✓ Voeg een li:hover effect toe

editor

<!DOCTYPE html>
<html lang="nl">
<head>
  <meta charset="UTF-8">
  <style>
    body { font-family: Arial; background: #f9f9f9; padding: 20px; margin: 0; }
    ul { list-style: none; padding: 0; max-width: 300px; }
    li { padding: 12px 16px; border-bottom: 1px solid #eee; cursor: pointer; }

    /* Voeg hier pseudo-class stijlen toe */

  </style>
</head>
<body>
  <h2>Mijn takenlijst</h2>
  <ul>
    <li>HTML leren</li>
    <li>CSS leren</li>
    <li>JavaScript leren</li>
    <li>Een project bouwen</li>
    <li>Portfolio online</li>
  </ul>
</body>
</html>

Live preview

Kennischeck

4 vragen over selectors.

← Les 1 Les 3: Kleuren en tekst →