CSS Pseudo-classes: wat het is en hoe je het gebruikt

CSS gebruik je om je website op te maken. Daarvoor heb je de beschikking over idents (id) en klassen (class). Een id wordt in CSS vooraf gegaan door een # ('hekje'). Een class wordt in CSS vooraf gegaan door een punt.

Er zijn ook CSS-elementen die vooraf worden gegaan door een dubbele punt. Dit wordt een pseudo-class genoemd. Het voegt extra eigenschappen toe aan HTML-elementen. Het wordt daarom altijd gebruikt in combinatie met een element.

Op het moment dat dit geschreven wordt definiëert CSS in totaal 11 pseudo-classes. Hieronder vind je een overzicht.

Psudo-classs Beschrijving
:link 
Speciaal voor <a> (hyperlinks): alle niet-bezochte hyperlinks in het document worden opgemaakt volgens deze CSS-regel.
Voorbeeld
a:link {
  color:red;
  text-decoration:underline;
  font-weight:normal
}
Niet-bezochte hyperlinks zijn rood, enkel onderstreept en normaal gedrukt.
Deze pseudo-class vervangt het attribuut LINK van de <BODY>-tag (HTML 4).
:visited 
Speciaal voor <a> (hyperlinks): alle bezochte hyperlinks in het document worden opgemaakt volgens deze CSS-regel.
Voorbeeld
a:visited {
  color:green;
  text-decoration:underline;
  font-weight:normal
}
Bezochte hyperlinks zijn groen, enkel onderstreept en normaal gedrukt.
Deze pseudo-class vervangt het attribuut VLINK van de <BODY>-tag (HTML 4).
:active 
Opmaakstijl voor een element waarop wordt geklikt. Vaak is dat een <a>-tag (hyperlink), maar het kan elk element van je document zijn waar je op kunt klikken.
Voorbeeld
a:active {
  color:green;
  text-decoration:none;
  font-weight:bold
}
Actieve hyperlinks zijn groen, niet onderstreept en vet gedrukt.
Deze pseudo-class in deze vorm vervangt het attribuut ALINK van de <BODY>-tag (HTML 4).
 
Voorbeeld
p:active { font-size:120% }
Elke paragraaf waar op wordt geklikt heeft 20% grotere letters.
:hover 
Opmaakstijl voor een element waar de muis-aanwijzer over heen gaat. Vaak wordt dit gebruikt voor een <a>-tag (hyperlink), maar het kan elk element van je document zijn waar je met de muis overheen kunt gaan.
Voorbeeld
a:hover {
  color:red;
  text-decoration:none;
  border-bottom:3px double blue
  font-weight:bold
}
Actieve hyperlinks zijn rood, dubbel onderstreept met blauw en vet gedrukt.
 
Voorbeeld
p:hover { font-size:120% }
Elke paragraaf waar de muis op staat heeft 20% grotere letters.
:focus 
Opmaakstijl voor een element dat de focus krijgt. Dit wordt vooral toegepast in formulieren, in het bijzonder voor invoervelden. Voorbeeld:
input { border:0 }
input:focus { border:1px solid red }
Het actieve input-veld heeft een rode rand.
:first‑letter 
Speciaal voor block-elementen, zoals <p> (paragraph) en <h.> (koppen): Opmaakstijl voor de eerste letter. Zie hiervoor het item Content opmaken met :first-letter.
:first‑line 
Speciaal voor block-elementen, zoals <p> (paragraph) en <h.> (koppen): Opmaakstijl voor de eerste regel. Zie hiervoor het item Content opmaken met :first-line.
:first‑child 
Speciaal voor block-elementen, zoals <p> (paragraph) en <h.> (koppen): Opmaakstijl voor het eerste element in het document. Zie hiervoor het item Content opmaken met :first-child en :last-child.
:last‑child 
Speciaal voor block-elementen, zoals <p> (paragraph) en <h.> (koppen): Opmaakstijl voor het laatste element in het document. Zie hiervoor het item Content opmaken met :first-child en :last-child.
:before 
Speciaal voor block-elementen, zoals <p> (paragraph) en <h.> (koppen): Voeg content toe vóór een block-element. Zie hiervoor het item Content opmaken met :before en :after.
:after 
Speciaal voor block-elementen, zoals <p> (paragraph) en <h.> (koppen): Voeg content toe achter een block-element. Zie hiervoor het item Content opmaken met :before en :after.
:lang(taal) 
Opmaakstijl voor een block-element dat het language-attribuut heeft, dat begint met taal. Speciaal bedoeld voor meertalige websites.

Een paar opmerkingen:

 
terug

html-357; Laatste wijziging: 21 mei 2020