CSS pseudo-klassen

Wat doet een pseudoklasse?

Het woord "pseudo" is een transcriptie van een Grieks woord dat "liegen, bedrieglijk, valse" betekent. Dus, het zijn dus wel degelijk pseudo-elementen, omdat ze eigenlijk niets in het document wijzigen. Integendeel, het zijn spookachtige elementen die niet zichtbaar zijn voor de gebruiker maar die stijlbaar zijn in CSS zijn.

Pseudoklassen zijn voor-gedefinieerd. Je moet die niet zelf declareren in je HTML. Elk element heeft die pseudoklassen en je kan die dus gebruiken in de stijlregels.

Een pseudo-class selector heeft als basis een dubbele punt gevolgd door de naam van de pseudo-class. Stijlregels waarin gebruik gemaakt wordt van een pseudo-class selector kunnen er als volgt uitzien:

:pseudo-classnaam { stijldeclaratie }
Element:pseudo-classnaam { stijldeclaratie }

De naam van een pseudo-class is hoofdletterongevoelig. Dat wil zeggen dat het niet uitmaakt of de naam in hoofdletters of in kleine letters wordt geschreven.

:link, :visited, :hover en :active

Deze vier pseudoklassen vormen een groep. De volgorde waarin je ze toepast spelen een rol.

Pseudo classen worden gebruikt om een bepaald effect aan een selector mee te geven. Het bekendste pseudo-class is wel de :hover die zorgt ervoor dat de weergave van een element wijzigt, wanneer je er met de muisaanwijzer boven komt, dat heet een Rollover effect.

Een pseudo-class selector is vergelijkbaar met een klasse in CSS, maar heeft als basis een dubbele punt gevolgd door de naam van de pseudo-class.

a:link { color: #0000FF; }
a:visited { color: #FF00FF; }
a:hover { color: #00CCFF; }
a:active { color: #FF0000; }

De selectoren :link, :visited, :hover en :active vormen een groep. Elk van de selectoren is een pseudo-klasse die je meestal met de <a>-tag gebruikt.

1. De eerste link, geldt voor niet-bezochte links, en standaard is die gestileerd met een blauw onderstrepinglijn.
2. De tweede, visited, is van toepassing op bezochte koppelingen, en maakt ze magenta.
3. De derde stijldefinitie, hover, overschrijft de eerste twee door de koppelingen lichtblauw te maken wanneer de muis erover heen gaat, of ze al bezocht zijn of niet maakt niets uit.
4. De vierde stijldefinitie, active, maakt de koppelingen rood als je erop klikt Omdat active als laatste is gedefineerd, overschrijft deze de eerste drie, zodat het van kracht wordt zelfs als de links reeds bezocht zijn of niet of als er met de muis overheen is gegaan of niet.

In deze volgorde hebben de pseudoklassen het gewenste effect. Als je al op de link geklikt hebt wordt die magenta gekleurd. Als je over de link zweeft met de muis wordt die blauw gekleurd en op het moment van het klikken (actief dus) wordt die rood.

Als je de volgorde veranderd en de :hover of :active pseudoklasse voor de andere twee plaatst, hebben die geen effect meer.

CSS3 beschikt over meer pseudo-klassen dan CSS2

1. :nth-child(N), :nth-child Pseudo-class expressies leren begrijpen
   selecteert elementen op basis van hun plaats in de lijst van elementen in een ouderelement
2. :nth-last-child(N)
   selecteert het N laaste element in de lijst van elementen in een ouderelement
3. :nth-of-type(N)
   selecteert elementen op basis van hun plaats in de lijst van elementen in een ouderelement van hetzelfde type
4. :nth-last-of-type(N)
   selecteert het N laaste element in de lijst van elementen in een ouderelement van hetzelfde type
5. :last-child
   selecteert het laaste element in de lijst van elementen in een ouderelement
6. :first-of-type
   selecteert het eerste element in de lijst van elementen in een ouderelement van het gespecifieerde type
7. :last-of-type
   selecteert het laaste element in de lijst van elementen in een ouderelement van het gespecifieerde type
8. :only-child
   matches an element if it’s the only child element of its parent
9. :only-of-type
   matches an element that’s the only child element of its type
10. :root
    matches the element that’s the root element of the document
11. :empty
    matches elements that have no children
12. :target
    matches an element that’s the target of a fragment identifier in the document’s URI
    zie: CSS pseudoklasse target
13. :enabled
    matches user interface elements that are enabled
14. :disabled
    matches user interface elements that are disabled
15. :checked Pseudo-class
    matches elements like checkboxes or radio buttons that are checked
16. :not(S)
    matches elements that aren’t matched by the specified selector