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-klasse	Wanneer actief
:hover	Als de muis over het element beweegt
:active	Op het moment dat je klikt (de muis is ingedrukt)
:focus	Als het element "focus" heeft (bijv. een invoerveld waarin je typt)
:visited	Een link die de bezoeker al eens heeft bezocht
:disabled	Een uitgeschakeld formulier-element (knop of invoerveld)
: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))

: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 en onderzoek

Beweeg je muis over de link en klik (en houd vast) op de knop.

Probeer eerst zelf, klap dan het antwoord uit.

1. Verander li:first-child in li:last-child. Welk item krijgt nu de stijl?
   Antwoord

   Het derde item wordt vet en donkergroen, en het eerste is weer zwart en niet vet. :last-child kiest het laatste kind van de lijst.
2. Verander li:first-child in li:nth-child(2). Welk item krijgt dan de stijl?
   Antwoord

   Het tweede item. Het getal tussen de haakjes telt vanaf 1, dus li:nth-child(1) doet hetzelfde als li:first-child.
3. Voeg een regel li:hover toe met bijvoorbeeld background-color: yellow;. Wat zie je als je met je muis over de items beweegt?
   Antwoord

   Het item onder je muis krijgt een gele achtergrond over de hele breedte, en verliest die zodra je muis weggaat. :hover werkt op elk element, niet alleen op links.
4. Vervang button:active door button:hover. Wanneer wordt de knop nu oranje?
   Antwoord

   Al zodra je muis op de knop staat, zonder te klikken. Met :active werd hij alleen oranje zolang je de muisknop ingedrukt hield.
5. Verwijder de regel button:focus. Klik in het voorbeeld en druk twee keer op Tab: eerst komt de link aan de beurt, dan de knop. Zie je nog waar je staat?
   Antwoord

   Ja, maar minder duidelijk. Zonder jouw regel tekent de browser zijn eigen dunne, donkere rand om de knop, in plaats van de dikke blauwe rand van 3 pixels.

Editor laden...

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.