Multimedia
Les 5

CSS - pseudoklassen

Doelstelling

In deze les leren we hoe je met selectoren interactieve webpagina's kan maken.

Nu worden alle gedichten getoond. Als de bezoeker een gedicht selecteert, springt de pagina naar het geselecteerde gedicht. Maar het menu en de header springen ook naar boven. Om een ander gedicht te kunnen selecteren moet de bezoeker terug naar boven scrollen. We willen de webpagina zo wijzigen dat als de bezoeker een gedicht selecteert, alleen het geselecteerde gedicht getoond wordt zodat het menu en de paginaheader zichtbaar blijven.

Stappenplan

We gaan verder met selectoren en in het bijzonder:

1. de klasse-selector;
2. de algemene verwantschapselector;
3. de :target selector;

Oefening

1. Open je Cloud9 workspace.
2. Maak een backup van het marsman.html en app.css bestand.
3. Stap voor stap wordt de oefening uitgelegd in Met de :target pseudo-klasse kan je een element opmaken dat de target is van een interne hyperlink op een webpagina.
4. In het filmpje De target pseudoklasse kan je stap voor stap volgen hoe je de oefening maakt.

Opdracht

Er is geen opdracht voor deze les. Maak wel de oefening want we gaan die code later nog intensief gebruiken.