Les 7: Pseudo-classes, (hyper)links en span-element

Naast classes bestaan er ook pseudo-classes in CSS. Met een pseudo-class kun je elementen selecteren in een bepaalde toestand. Bijvoorbeeld:

  • hover: De muis gaat over het element

  • active: Er wordt op het element geklikt

Voor (hyper)links <a> zijn er ook nog:

  • link: Er is nog niet op de link geklikt

  • visited: Er is wel op de link geklik

Je gebruikt de : (dubbele punt) voor pseudo-classes: element:pseudo-class

p:hover { /* Met muis over paragraaf? Verander lettergrootte.*/
  font-size: 30px;
}

p a:visited { 
  /* Is er op een link in een paragraaf geklikt? Kleur: blauw */
  color: blue;
}

a:link { 
  /* Links waar nog NIET op geklikt is hebben kleur geel*/
  color: yellow;
}

Je kunt ook een class en een pseudo-class gebruiken.

In HTML worden links standaard onderstreept. Je kunt dat ook uitzetten met de text-decoration eigenschap.

Soms wil je een stukje van een paragraaf een andere layout geven. Een manier om dit te doen is door een <span> element om je tekst te zetten. Met <span id="tekst"> kun je CSS bestand alleen dat stukje tekst selecteren.

Opdrachten

[1] Oefen met pseudo-classes en span in je pagina.

[2] Maak de opdrachten op repl.it

PreviousLes 6: Elementen selecteren: classes en id'sNextLes 8: Tabellen opmaken

Last updated

Was this helpful?