Krijg meer controle over uw webontwerpen met behulp van deze geavanceerde CSS-selectors.

CSS ondersteunt een verscheidenheid aan selectors om elementen voor stijl te identificeren, elk met zijn eigen set regels. Hoewel de meeste selectiemethoden eenvoudig zijn, bieden pseudo-klassen en pseudo-elementen meer flexibiliteit. Ze laten je elementen selecteren op basis van hun staat of positie binnen een structuur, of ze selecteren specifieke delen van de inhoud.

Deze selectors kunnen lastig te gebruiken zijn, en het is gemakkelijk om pseudo-klassen met pseudo-elementen te verwarren. Hoe maak je daartussen onderscheid?

CSS-pseudoklassen begrijpen

Een CSS-pseudoklasse is een soort speciaal trefwoord dat u met selectors kunt gebruiken om elementen op verschillende manieren vorm te geven. Met deze trefwoorden kunt u elementen targeten wanneer bepaalde dingen gebeuren, bijvoorbeeld wanneer een gebruiker de muis over een element beweegt, erop klikt of iets in een invoerveld typt.

Pseudoklassen maken uw webpagina interactiever en responsiever door te veranderen hoe elementen eruitzien of zich gedragen op basis van gebruikersacties. Wanneer je

gebruik ze met andere CSS-kiezersbieden ze nauwkeurige controle over styling en interactiviteit.

Syntaxis en gebruik van CSS-pseudoklasse

De syntaxis voor een CSS-pseudoklasse bestaat uit een dubbele punt (:) gevolgd door de naam van een pseudoklasse. Hier is de basissyntaxis:

selector:pseudo-class {
/* styles */
}

In deze syntaxis:

  • keuzeschakelaar verwijst naar het element of de elementen waarop u stijlen wilt selecteren en toepassen. Het kan een HTML-element, een klasse, een ID of een complexere selector zoals een combinatie zijn. De selector is optioneel, maar meestal gebruik je er een; zonder dit zal uw pseudo-klasse zich richten op alle elementen waarop deze van toepassing kan zijn.
  • pseudo-klasse is het trefwoord dat een specifieke staat of aandoening vertegenwoordigt die u wilt targeten.

CSS categoriseert pseudo-klassen in verschillende groepen op basis van hun functionaliteit en de omstandigheden waarop ze zich richten. Hier zijn de belangrijkste categorieën, samen met enkele voorbeelden:

Gebruikersinteractie

:zweven

Selecteert een element wanneer de muisaanwijzer erover beweegt.

:actief

Selecteert een element wanneer een gebruiker het activeert, meestal door erop te klikken.

: bezocht

Selecteert links die de gebruiker heeft bezocht.

Structureel

:eerstgeborene

Selecteert het eerste onderliggende element van een bovenliggend element.

:laatste kind

Selecteert het laatste onderliggende element van een ouder.

:nde-kind (n)

Selecteert elementen op basis van hun positie binnen een ouder, zodat u zich op specifieke kinderen kunt richten.

Vormgerelateerd

:gehandicapt

Selecteert uitgeschakelde formulierelementen.

:gecontroleerd

Selecteert aangevinkte keuzerondjes of selectievakjes.

UI-elementstatus

:ongeldig

Selecteert ongeldige formulierelementen.

:vereist

Selecteert de vereiste velden met formulierelementen.

:optioneel

Selecteert formulierelementen die optionele velden zijn.

Link-gerelateerd

:koppeling

Selecteert niet-bezochte links.

Op taal gebaseerd

:lang()

Selecteert elementen op basis van de taal die is opgegeven in hun “lang”-attribuut.

U kunt een veelvoorkomend voorbeeld proberen door toepassen van: hover-effecten op afbeeldingen in een galerij. Typische stijlen zijn onder meer het vergroten of vervagen van deze afbeeldingen wanneer iemand erover beweegt.

CSS-pseudo-elementen verkennen

Een CSS-pseudo-element is een soort speciaal trefwoord dat u met selectors kunt gebruiken om specifieke delen van de inhoud van een element op te maken of om extra inhoud in te voegen. Met deze trefwoorden kunt u elementen targeten en stylen op basis van hun inhoudsstructuur.

Pseudo-elementen verbeter het ontwerp en de lay-out van uw webpagina door u de mogelijkheid te geven elementen te stylen op manieren die traditioneel alleen mogelijk waren met echte HTML-elementen.

Syntaxis en implementatie van CSS-pseudo-elementen

Pseudo-elementen in CSS hebben een specifieke syntaxis waarbij twee dubbele punten worden gebruikt (::) gevolgd door de naam van het pseudo-element. Hier is de basissyntaxis:

selector::pseudo-element {
/* styles */
}

In deze syntaxis:

  • keuzeschakelaar richt zich op het element waarop u het pseudo-element wilt toepassen. Het kan elke geldige CSS-selector zijn, inclusief helemaal geen.
  • pseudo-element is de naam van het pseudo-element dat u wilt targeten. Je kunt slechts één pseudo-element in een selector gebruiken, omdat ze in combinatie niet echt logisch zijn.

Hier zijn enkele van de pseudo-elementen:

::voor

Voegt inhoud in vóór de inhoud van het geselecteerde element.

::na

Voegt inhoud in na de inhoud van het geselecteerde element.

::eerste brief

Vormt de eerste letter van de tekst binnen een element.

::selectie

Stijlt het gedeelte van de tekst dat een gebruiker met de cursor heeft geselecteerd.

::markeerstift

Vormt het markeringsvak van een lijstitem (bijvoorbeeld het opsommingsteken of nummer in een lijst).

::keu

Past stijlen toe op aanwijzingen in media-elementen zoals

De ::before en ::after pseudo-elementen kan bijzonder lastig zijn om te begrijpen, dus als je ze oefent, zul je de rest beter onder de knie krijgen.

Overeenkomsten en verschillen

Hier zijn de overeenkomsten en verschillen tussen CSS-pseudoklassen en pseudo-elementen:

Pseudo-klassen

Pseudo-elementen

Syntaxis

Voorafgegaan door een enkele dubbele punt (:).

Voorafgegaan door twee dubbele punten (::).

Gebruik

Selecteer en stijl elementen op basis van hun staat, positie of gebruikersinteractie.

Geef specifieke delen van de inhoud van een element vorm of maak virtuele elementen.

Selectoren

Kan op elk punt binnen een complex- of samengestelde selector voorkomen.

Moet het laatste onderdeel van een selector zijn en kan slechts één keer voorkomen.

Inhoud invoegen

Voegt geen inhoud in, voornamelijk voor styling op basis van staat.

Kan inhoud of virtuele elementen invoegen voor of na de inhoud van het geselecteerde element.

Typografische stijl

Wordt doorgaans niet gebruikt voor typografische styling.

Wordt gebruikt voor tekst en typografische stijl (bijvoorbeeld ::eerste regel, ::eerste letter).

Doelgerichte onderdelen

Richt zich op hele elementen.

Richt zich op specifieke delen van de inhoud van een element.

Browserondersteuning

Over het algemeen goed ondersteund.

Over het algemeen goed ondersteund, maar sommige oudere browsers hebben mogelijk beperkte ondersteuning.

Pseudoklassen en pseudo-elementen zijn belangrijk in CSS voor het creëren van verschillende stijlen en interactieve functies. Hoewel ze enkele overeenkomsten vertonen, hebben ze elk hun eigen unieke rol in webontwerp en -ontwikkeling.

Pseudo-klassen en pseudo-elementen in actie

U kunt oefenen met het gebruik van CSS-pseudoklassen en pseudo-elementen in verschillende projecten om uw begrip ervan te beoordelen. Voorbeelden van eenvoudige projecten die u kunt uitvoeren zijn onder meer profielkaarten, navigatiemenu's en lijststijlen. Deze projecten bieden praktische ervaring om uw CSS-vaardigheden te verbeteren en tegelijkertijd interactiviteit en stijl in uw webontwerpen op te nemen.