pseudo selectors

Er bestaan 2 soorten van pseudo-selectoren, nl.:

• pseudo-classes (:)

• pseudo-elements (::)

Een handige video over pseudoclass- en pseudoelement-selectoren

pseudoklassen

Pseudo-classes kunnen worden toegevoegd aan de CSS-selector van een element om het op een bepaalde manier te stylen. Pseudo-classes beïnvloeden de staat van een HTML-element en worden actief zodra er een actie op dat element wordt uitgevoerd.

:hover is bijvoorbeeld een pseudo-classe die vaak samen met links en knoppen gebruikt wordt om een stijlverandering te laten plaatsvinden wanneer de gebruiker de muis over het element beweegt.

pseudo-classes zijn voorgedefinieerd in CSS. Elk element heeft dus pseudo-classes die gebruikt kunnen worden in de stijlregels. Een pseudo-classe-selector heeft als basis een dubbele punt gevolgd door de naam van de pseudo-classe. De naam van een pseudo-classe is hoofdletterongevoelig.

Stijlregels waarin gebruik gemaakt wordt van een pseudo-classe selector kunnen er als volgt uitzien:

:pseudoclass-naam { 
    /* ... */ 
}

element:pseudoclass-naam { 
    /* ... */ 
}

locatie pseudo-classes

Elk van de volgende selectoren is een pseudo-classe die je meestal met het <a>-element gebruikt. De volgorde waarin ze worden toegepast speelt een rol.

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

:link

De :link CSS-pseudo-classe geldt voor niet-bezochte links en is standaard blauw en onderlijnd.

a:link {
  color: #0000FF;
}

:visited

De :visited CSS-pseudo-classe geldt voor bezochte links en is standaard magenta.

a:visited {
  color: #FF00FF;
}

:hover

De :hover CSS-pseudo-classe is de meest bekende pseudo-class die ervoor zorgt dat de weergave van een element wijzigt wanneer er met een muis wordt over gegaan.

a:hover {
  color: #00CCFF;
}

:active

De :active CSS-pseudo-classe maakt in bovenstaand voorbeeld de koppelingen rood als erop geklikt wordt. Omdat :active als laatste gedefineerd is, overschrijft deze de eerste drie pseudo-classes. Dit wordt bijvoorbeeld gebruikt bij navigatie, zodat je in de menu weet welke pagina je aan het bekijken bent.

a:active {
  color: #FF0000;
}

input pseudo-klassen

De volgende pseudo-classes zijn gekoppeld aan formulieren en geven de mogelijkheid om elementen uit een formulier te selecteren op basis van de toestand van het form-element.

:checked

De :checked CSS-pseudo-classe vertegenwoordigt een radio-button, een checkbox of option, waarbij dat element is aangevinkt of status is geschakeld.

input:checked{
  color: red;
}
option:checked {
  color: red;
}

:required

De :required CSS-pseudo-classe wordt gebruikt bij formulieren voor het markeren van velden die geldige gegevens moeten bevatten voordat een formulier kan worden ingediend.

:valid

De :valid CSS-pseudo-classe vertegenwoordigt een element waarvan de inhoud met succes wordt gevalideerd. Hierdoor kunnen geldige velden eenvoudig een uiterlijk krijgen dat de gebruiker helpt te bevestigen dat zijn gegevens correct zijn opgemaakt.

:invalid

De :invalid CSS-pseudo-classe vertegenwoordigt een element waarvan de inhoud niet gevalideerd kan worden. Dit is handig om invoerfouten voor de gebruiker te markeren.

input:invalid {
  background-color: #ffdddd;
}
form:invalid {
  border: 5px solid #ffdddd;
}
input:valid {
  background-color: #ddffdd;
}
form:valid {
  border: 5px solid #ddffdd;
}
input:required {
  border-color: #800000;
  border-width: 3px;
}
input:required:invalid {
  border-color: #c00000;
}

boomstructuur pseudoclassen

Deze pseudoclassen worden gebruikt om elementen uit de HTML-structuur te halen. We kunnen de structuur doorlopen zonder te weten welk element er exact staat.

:first-child

De :first-child CSS-pseudo-classe vertegenwoordigt het eerste element van een groep elementen op hetzelfde niveau (voorbeeld).

/* Selecteert de eerste <p> van meerdere paragrafen */
p:first-child {
  color: red;
}

:last-child

Met :last-child selecteer je het laatste element in de lijst van elementen in een ouderelement (voorbeeld).

/* Selecteert het laatste <li>-element in een ongeordende lijst */
ul li:last-child {
  border: 1px solid red;
  color: red;
}

:only-child

:only-child komt overeen met een element als dit het enige onderliggende element van het ouderelement is, het 'enige kind' als het ware (voorbeeld).

:nth-child(N)

De :nth-child(N) CSS-pseudo-class selecteert elementen op basis van hun positie in een groep van broers en zussen binnen één ouderelement (voorbeeld).

/* Selecteert td-elementen van de even rijen (2n) in tbody van een tabel */
table tbody tr:nth-child(2n) td{
    background-color: rgb(251, 251, 251);
}
/* Selecteert td-elementen van de even rijen (even) in tbody van een tabel */
table tbody tr:nth-child(even) td{
    background-color: rgb(251, 251, 251);
}
/* Selecteert de oneven rijen (2n+1) in tbody van tabel met class="spreadsheet" */
.spreadsheet tbody tr:nth-child(2n+1) {
	background-color: #ffffff;
}
/* Selecteert de oneven rijen (odd) in tbody van tabel met class="spreadsheet" */
.spreadsheet tbody tr:nth-child(odd) {
	background-color: #ffffff;
}

:nth-last-child(N)

De :nth-last-child(N) CSS-pseudo-classe selecteert het N laatste element in de lijst van elementen in een ouderelement (voorbeeld).

table {
  border: 1px solid blue;
}
/* Selecteert de laatste drie elementen */
tr:nth-last-child(-n+3) {
  background-color: pink;
}
/* Selecteert elk element vanaf het tweede tot het laatste element */
tr:nth-last-child(n+2) {
  color: blue;
}
/* Selecteert enkel het voorlaatste element */
tr:nth-last-child(2) {
  font-weight: 600;
}

:nth-of-type

De :nth-of-type CSS-pseudo-classe selecteert elementen van een bepaald type of op basis van hun positie in een groep broers en zussen.

/* even paragrafen */
p:nth-of-type(2n) {
  color: blue;
}

/* oneven paragrafen */
p:nth-of-type(2n+1) {
  color: red;
}

/* eerste paragraaf */
p:nth-of-type(1) {
  font-weight: bold;
}

:first-of-type

De :first-of-type CSS-pseudo-classe selecteert het eerste element van zijn type binnen een groep van broers / zussen.

/* eerste artikel binnen een groep van meerdere artikels */
article:first-of-type {
  color: red;
  font-style: italic;
}

Er bestaan nog meer véél meer pseudo-classes. Bekijk ze hier allemaal!

Het verschil tussen nth-child en nth-of-type pseudo class selectors gevisualiseerd

pseudo-elementen

Met pseudo-elementen kunnen we een specifiek onderdeel van een element gaan beïnvloeden. Denk hierbij bijvoorbeeld aan de eerste lijn van een paragraaf. We zouden die lijn dan in een span-element kunnen steken of we kunnen met een pseudo-element-selector die lijn specifieke stijleigenschappen geven.

::first-letter

p::first-letter {
  font-size: 250%;
}

::first-line

p::first-line {
  color: red;
}

Een volledige lijst van alle pseudo-elementen vind je hier.