MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/d6d7ff2e2f9c

In CSS, worden selectoren gebruikt om de HTML elementen te selecteren die we willen stijlen. Er zijn een hoop CSS selectoren beschikbaar, wat toe laat om zeer precies te kiezen welke elementen moeten gestijld worden.  In de volgende artikelen gaan we dieper in op de verschillende soorten, en kijken we hoe ze werken.

Vereisten: Algemene computervaardigheden, de basissoftware geïnstalleerd hebben, algemene kennis van hoe met files werken, en een basiskennis van HTML (bekijk Introductie tot HTML.)
Doelstelling: Een diepgaande kennis verwerven van hoe CSS selectoren werken.

De basis

In het vorige artikel legden we de algemene CSS syntax en terminologie gedetailleerd uit.  Relevant hier is dat selectoren een deel zijn van een CSS regel, en dat ze juist voor een declaratie-blok komen.

Verschillende soorten selectoren

Selectoren kunnen onderverdeeld worden in de volgende categorieën:

  • Eenvoudige selectoren: Selecteer één of meer elementen gebaseerd op element-type, class, of id.
  • Attribuut selectoren: Selecteer één of meer elementen gebaseerd op hun attributen / attribuutwaarden.
  • Pseudo-klassen: Selecteer één of meer elementen die een bepaalde staat / toestand hebben.  Enkele van de mogelijke voorbeelden zijn, onder andere: een element waar je met de muispointer boven zweeft, of een checkbox die momenteel niet aanklikbaar is (of net wel aangeklikt is), of een element dat het eerste kind is van zijn ouder in DOM-boom.
  • Pseudo-elementen: Selecteer één of meer delen van de inhoud van een element.  Mogelijke voorbeelden zijn, onder andere: het eerste woord van een paragraaf of inhoud die toegevoegd wordt vlak voor een element.
  • Combinatoren: Dit zijn eigenlijk zelf geen selectoren, maar combineren twee of meer selectoren om een zeer specifieke selectie te kunnen maken.  Zo kan je, bijvoorbeeld, enkel die paragrafen selecteren die kinderen zijn van div-elementen.  Of enkel die paragrafen die vlak na een hoofding komen.
  • Meervoudige selectoren: Ook dit zijn eigenlijk geen selectoren.  Het idee van deze is dat je meerdere selectoren op dezelfde CSS regel kan toepassen, gescheiden door komma's.  Zo wordt die CSS regel toegepast op alle elementen die geselecteerd worden door die selectoren.

Overzicht van de artikelen over selectoren

In de volgende vier artikelen verkennen we de verschillende aspecten van selectoren.  Aangezien er veel te leren is, verdeelden we de leerstof over vier artikelen.  Zo wordt het overzichtelijker en zijn er duidelijke rustpunten na elk deel.  Dit zijn de artikelen:

Je wordt ten zeerste aangeraden om te beginnen bij de eenvoudige selectoren, om te voorkomen dat je belangrijke informatie mist.

Documentlabels en -medewerkers

 Aan deze pagina hebben bijgedragen: Badlapje
 Laatst bijgewerkt door: Badlapje,