08. pseudoklassen

definitie

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 samen met links en knoppen gebruikt wordt om een actie te laten plaatsvinden wanneer de gebruiker de muis erover beweegt.

Pseudoklassen zijn voor-gedefinieerd. Elk element heeft dus pseudoklassen die gebruikt kunnen worden in de stijlregels. Een pseudo-class selector heeft als basis een dubbele punt gevolgd door de naam van de pseudo-class. De naam van een pseudo-class is hoofdletterongevoelig. Stijlregels waarin gebruik gemaakt wordt van een pseudo-class selector kunnen er als volgt uitzien:

:pseudo-classnaam { 
    stijldeclaratie 
}

element:pseudo-classnaam { 
    stijldeclaratie 
}

Een handige video over pseudo-class en pseudo-element

locatie pseudoklassen

:link

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

a:link { color: #0000FF; }

try it yourself: https://www.w3schools.com/cssref/tryit.asp?filename=trycss_sel_link

:visited

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

a:visited { color: #FF00FF; }

try it yourself: https://www.w3schools.com/cssref/tryit.asp?filename=trycss_sel_visited

user-action pseudoklassen

Elk van de selectoren is een pseudo-klasse die je meestal met de <a>-tag gebruikt. De volgorde waarin ze worden toegepast spelen een rol.

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

:hover

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

try it yourself: https://www.w3schools.com/cssref/tryit.asp?filename=trycss_sel_hover

:active

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

try it yourself: https://www.w3schools.com/cssref/tryit.asp?filename=trycss_sel_active

input pseudoklassen

:checked

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

/* label bij input aangevinkt*/
input:checked + label {
  color: red;
}

/* radio element, aangevinkt */
input[type="radio"]:checked {
  box-shadow: 0 0 0 3px orange;
}

/* checkbox element, aangevinkt */
input[type="checkbox"]:checked {
  box-shadow: 0 0 0 3px hotpink;
}

/* option element, geselecteerd */
option:checked {
  box-shadow: 0 0 0 3px lime;
  color: red;
}

try it yourself: https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_checked

:required

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

try it yourself: https://www.w3schools.com/cssref/tryit.asp?filename=trycss_sel_required

:valid

De :valid CSS-pseudoklasse 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.

try it yourself: https://www.w3schools.com/cssref/tryit.asp?filename=trycss_sel_valid

:invalid

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

try it yourself: https://www.w3schools.com/cssref/tryit.asp?filename=trycss_sel_invalid

label {
  display: block;
  margin: 1px;
  padding: 1px;
}

.field {
  margin: 1px;
  padding: 1px;
}

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 pseudoklassen

:first-child

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

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

try it yourself: https://www.w3schools.com/cssref/tryit.asp?filename=trycss_sel_firstchild

:last-child

De :last-child selecteert 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;
}

try it ourself: https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_last-child

:only-child

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

try it yourself: https://www.w3schools.com/cssref/trysel.asp?selector=b:only-child

:nth-child(N)

De :nth-child(N) CSS-pseudoklasse 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;
}

try it yourself: https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_nth-child

:nth-last-child(N)

De :nth-last-child(N) CSS-pseudoklasse 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;
}

try it yourself: https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_last-child

:nth-of-type

De :nth-of-type CSS-pseudoklasse 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;
}

try it yourself: https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_nth-of-type

:first-of-type

De :first-of-type CSS-pseudoklasse 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;
}

try it yourself: https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_first-of-type