CSS link en child pseudo-klassen

CSS-pseudoklassen kunnen worden toegevoegd aan de CSS-selector van een element om het op een bepaalde manier te stylen. Pseudoklassen beïnvloeden de staat van een html-element en zorgen ervoor dat er een actie op dat element wordt uitgevoerd .

:hover is bijvoorbeeld een pseudoklasse die vaak wordt gebruikt met links en knoppen, om een actie te laten plaatsvinden wanneer de gebruiker de muis erover beweegt.

Wat doet een pseudoklasse?

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.

De eerste link, geldt voor niet-bezochte links, en standaard is die gestileerd met een blauw onderstrepinglijn.
De tweede, visited, is van toepassing op bezochte koppelingen, en maakt ze magenta.
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.
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 volgorde, zoals hierboven aangegeven, 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.

HTML

<body>
  <a href="#">Boeken</a>
  <a href="#">Muziek</a>
  <a href="#">Eten</a>
  <a href="#">Film</a>
</body>

CSS

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

CSS3 beschikt ook over verschillende child pseudoklassen

We gaan in deze les alle child pseudoklassen bespreken. Ze zijn handig voor de opmaak van tabellen.

De :first-child CSS-pseudoklasse vertegenwoordigt het eerste element van een groep elementen op hetzelfde niveau.
De :last-child selecteert het laaste element in de lijst van elementen in een ouderelement
De :nth-child(N) CSS-pseudoklasse selecteert elementen op basis van hun positie in een groep van broers en zussen binnen één ouderelement.
De :nth-last-child(N) CSS-pseudoklasse selecteert het N laaste element in de lijst van elementen in een ouderelement
De :only-child matches an element if it’s the only child element of its parent

2020-10-17 10:22:19