Les 8 – CSS Pseudo-klassen

Wat ga je leren?

Je leert hoe je elementen anders kunt stijlen op basis van hun toestand of positie — bijvoorbeeld als de muis eroverheen beweegt of als het het eerste item in een lijst is.

Theorie

Een pseudo-klasse is een selector die een speciale toestand of positie beschrijft. Je schrijft ze met een dubbele punt direct na de selector:

a:hover {
  color: red;
}

Veelgebruikte pseudo-klassen

Pseudo-klasse	Wanneer actief
:hover	Als de muis over het element beweegt
:first-child	Het eerste kind-element van zijn ouder
:last-child	Het laatste kind-element van zijn ouder
:nth-child(n)	Het n-de kind-element (bijv. nth-child(2))

Predict

Wat denk je dat er gebeurt als je de muis over de link beweegt in de preview?

Klik hier voor het antwoord

De kleur van de link verandert van blauw naar rood, en de onderstreping verdwijnt. Zodra je de muis wegbeweegt, komt de oorspronkelijke stijl terug. :hover is alleen actief zolang de muis erop staat.

Probeer het zelf!

Beweeg je muis over de link en over de lijstitems in de preview.

Editor laden...

Investigate

Experimenteer:

• Verander li:first-child in li:last-child — welk item wordt nu gestijld?
• Probeer li:nth-child(2) — welk item krijgt dan de stijl?
• Voeg :hover toe aan de <li> items — wat zie je als je eroverheen beweegt?

Modify

Opdracht: Voeg een stijl toe zodat het laatste lijstitem een andere kleur krijgt.

Tip

Gebruik li:last-child als selector in de CSS.

Antwoord

li:last-child {
  color: purple;
  font-style: italic;
}

Make

Opdracht: Maak een interactieve knop in HTML (bijvoorbeeld <button>Klik Mij!</button>). Gebruik CSS pseudo-klassen zodat de knop van kleur verandert als je er met je muis overheen gaat (:hover), en nóg een andere kleur krijgt of iets kleiner wordt als je erop klikt (:active).

Tip

Je hebt drie stukjes CSS nodig:

1. button (basisstijl)
2. button:hover (als de muis erop staat)
3. button:active (tijdens het klikken)

Antwoord

<!-- HTML -->
<button>Bestel nu</button>

/* CSS */
button {
  background-color: blue;
  color: white;
  padding: 15px 30px;
  font-size: 1.2rem;
  border: none;
  cursor: pointer;
}

button:hover {
  background-color: darkblue;
}

button:active {
  background-color: red;
}

Er gaat iets mis

Spatie voor de pseudo-klasse

/* Fout: spatie voor :hover */
a :hover {
  color: red;
}

/* Goed: geen spatie voor :hover */
a:hover {
  color: red;
}

Met een spatie betekent a :hover: "een element met :hover binnen een <a>". Zonder spatie betekent het: "een <a> die de :hover toestand heeft". In de meeste gevallen wil je geen spatie.