CSS One Page App met target pseudo-klasse

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.

Leerpad

1. We gaan verder met selectoren en in het bijzonder:
   1. de klasse-selector;
   2. de algemene verwantschapselector;
   3. de :target selector;
2. 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

1. Pas de techniek uit het voorbeeld toe op je eigen webpagina.
2. Maak de opdracht op Cloud9 in de map met de naam les8.
3. Deadline: 19 april 2018