Ga naar hoofdinhoud

CSS Pseudo-klassen

Wat ga je leren?​

Een element kan er anders uitzien afhankelijk van zijn toestand of zijn plek: als de muis eroverheen gaat, of als het het eerste item in een lijst is.

Theorie​

Wat is rem?

In de voorbeelden hieronder staan groottes als 1.5rem. Dat betekent "anderhalf keer de basisgrootte van de pagina". Je hoeft er nu niets mee te doen; het hele verhaal over px, rem, em en % staat in Eenheden in CSS.

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-klasseWanneer actief
:hoverAls de muis over het element beweegt
:activeOp het moment dat je klikt (de muis is ingedrukt)
:focusAls het element "focus" heeft (bijv. een invoerveld waarin je typt)
:visitedEen link die de bezoeker al eens heeft bezocht
:disabledEen uitgeschakeld formulier-element (knop of invoerveld)
:first-childHet eerste kind-element van zijn ouder
:last-childHet laatste kind-element van zijn ouder
:nth-child(n)Het n-de kind-element (bijv. nth-child(2))
:focus en formulieren

:focus is vooral nuttig voor formulieren — geef een actief invoerveld of geselecteerde knop een opvallende rand zodat de gebruiker ziet waar hij/zij bezig is. Belangrijk voor toegankelijkheid (mensen die met Tab navigeren).

Predict​

Bekijk de CSS hieronder. Wat denk je dat er gebeurt als je:

  1. Je muis over de link beweegt?
  2. Op de knop klikt en de muisknop ingedrukt houdt?
  3. Met Tab naar de knop springt zonder te klikken?
Klik hier voor het antwoord
  1. Hover: de kleur van de link wordt rood en de onderstreping verdwijnt. Zodra je de muis wegbeweegt komt de blauwe link terug.
  2. Active: zolang je de muisknop ingedrukt houdt, krijgt de knop een andere kleur. Laat je los, dan gaat hij terug.
  3. Focus: de knop krijgt een opvallende rand zodra hij aan de beurt is. Dat is hoe iemand die met het toetsenbord navigeert ziet waar hij is.

Probeer het zelf.​

Beweeg je muis over de link, klik (en houd vast) op de knop, en klik in het invoerveld.

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?
  • Vervang button:active door button:hover — wat verandert er aan wanneer de oranje kleur verschijnt?
  • Verwijder button:focus en druk op Tab tot de knop aan de beurt is. Hoe weet je nu nog waar je staat?

Modify​

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

Editor laden...
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).

Editor laden...
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
<button>Bestel nu</button>
button {
  background-color: blue;
  color: white;
  padding: 15px 30px;
  font-size: 1.2rem;
  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.