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.

p.rood:hover { /* Met muis over paragraaf met class="rood"? 
                   Verander lettergrootte en kleur.*/
  font-size: 30px;
  color: black;
}

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

ul a { /* Alle links in een lijst niet onderstrepen*/
  text-decoration: none;
}

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.

<body>
  <h1>Dit is een header</h1>
  <p>Ik wil <span id="tekst">dit gedeelte</span> veranderen.</p>
</body>

In style.css:
#tekst { /* #tekst: selecteer alles in de span met id="tekst"*/
  font-size: 20px;
}

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