Beschrijf de pseudo-klassen en pseudo-elementen in…

Pseudo-klassen en pseudo-elementen breiden de mogelijkheden van CSS-selectors uit, waardoor stijlen kunnen worden toegepast op basis van de toestand, positie of andere kenmerken van elementen die niet met eenvoudige selectors kunnen worden uitgedrukt.

Pseudo-klassen

Pseudo-klassen beginnen met een enkele dubbele punt (:). Ze worden gebruikt om een element in een specifieke toestand te stylen.

Belangrijke pseudo-klassen:

:hover - styleert het element bij het zweven met de muis.
:active - styleert het element tijdens het klikken (activeren).
:focus - styleert het element dat momenteel de focus heeft (bijvoorbeeld na het klikken op een link of invoerveld).
:visited - styleert bezochte links.
:link - styleert niet-bezochte links.
:first-child - styleert het eerste kind van zijn ouder.
:last-child - styleert het laatste kind van zijn ouder.
:nth-child(n) - styleert het n-de kind van zijn ouder. n kan een nummer, een sleutelwoord (even, oneven) of een uitdrukking (2n+1) zijn.
:nth-last-child(n) - styleert het n-de kind vanaf het einde.
:not(selector) - styleert elementen die niet overeenkomen met de opgegeven selector.

/* Voorbeeld van gebruik van pseudo-klassen */
a:hover {
  color: blue; /* Verandert de kleur van de link bij zweven */
}

input:focus {
  border-color: green; /* Verandert de randkleur van het invoerveld bij focus */
}

li:first-child {
  font-weight: bold; /* Styleert het eerste lijstitem */
}

Pseudo-elementen

Pseudo-elementen beginnen met dubbele dubbele punt (::). Ze worden gebruikt om een specifiek deel van een element te stylen of om gegenereerde inhoud vóór of na de inhoud van het element in te voegen.

Belangrijke pseudo-elementen:

::before - voegt gegenereerde inhoud toe vóór de inhoud van het element. Vaak gebruikt met de eigenschap content.
::after - voegt gegenereerde inhoud toe ná de inhoud van het element. Vereist ook de eigenschap content.
::first-letter - styleert de eerste letter van een tekstblok.
::first-line - styleert de eerste regel van een tekstblok.
::selection - styleert het deel van het element dat door de gebruiker is geselecteerd.

/* Voorbeeld van gebruik van pseudo-elementen */
p::first-letter {
  font-size: 2em; /* Vergroot de eerste letter van de paragraaf */
  font-weight: bold;
}

h2::after {
  content: " ---"; /* Voegt tekst toe na de kop */
  color: gray;
}

mark::selection {
  background-color: yellow; /* Verandert de achtergrond van de geselecteerde tekst */
  color: black;
}

Historisch gebruikten pseudo-klassen één punt (:) voor compatibiliteit met CSS2.1, terwijl pseudo-elementen in CSS3 begonnen met dubbele punten (::) voor een betere onderscheid. Het wordt aanbevolen om dubbele punten te gebruiken voor pseudo-elementen in moderne code.

Vergelijkingstabel:

Kenmerk	Pseudo-klasse	Pseudo-element
Syntax	`:selector`	`::selector`
Doel	Toestand van het element	Deel van het element of gegenereerde inhoud
Voorbeelden	`:hover`, `:focus`, `:first-child`	`::before`, `::after`, `::first-letter`

Beschrijf de pseudo-klassen en pseudo-elementen in CSS.