Wat voor classes?

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;
}

Je krijgt ook een leuk effect voor links als je voor de pseudo-class hover van linkjes de text-decoration bijvoorbeeld laat verdwijnen en de kleur een beetje laat veranderen. Dan zorgt het voor een soort "knopjes" effect, omdat de link een beetje verandert als je je muis erop houdt. Dat "nodigt uit" om erop te klikken.

a { /* Links zijn normaalgesproken onderstreept en rood */
  text-decoration: underline;
  color: #ff0000; 
}

a:hover { /* Links die je "hovert" zijn niet onderstreept en wat lichter rood */
  text-decoration: none;
  color: #ee0000; 
}

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>

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

PreviousOpdracht NextOpdracht

Last updated 4 years ago

Was this helpful?

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; }

a { /* Links zijn normaalgesproken onderstreept en rood */ text-decoration: underline; color: #ff0000; } a:hover { /* Links die je "hovert" zijn niet onderstreept en wat lichter rood */ text-decoration: none; color: #ee0000; }