CSS Selectors

CSS Selectors

CSS-selectors worden gebruikt om HTML-elementen te 'vinden' (of selecteren) die een stijl moeten krijgen.

We kunnen CSS-selectors indelen in vijf categorieën:

Deze pagina legt de basis van CSS-selectors uit.

CSS element selectie

Element selectors kiezen HTML-elementen op basis van de element naam.

Voorbeeld

Hier zal elke <p>-element op de pagina centraal uitgelijnd zijn en de rode tekstkleur hebben:

p {
  text-align: center;
  color: red;
}

Probeer het zelf uit

CSS id selector

De id selector gebruikt de id eigenschap van het HTML-element om een specifiek element te selecteren.

De id van een element is uniek op de pagina, dus wordt de id selector gebruikt om een unieke element te selecteren!

Om een element te selecteren met een specifieke id, schrijf een schuin streepje (#), gevolgd door de id van het element.

Voorbeeld

Deze CSS-regel wordt toegepast op het HTML-element met id="para1":

#para1 {
  text-align: center;
  color: red;
}

Probeer het zelf uit

Let op:De naam van een id mag niet beginnen met een cijfer.

CSS klasse selector

Klasse selectors kiezen HTML-elementen met een specifieke class eigenschap.

Om een element te selecteren met een specifieke klasse, schrijf een punt (.) character, gevolgd door de klasse naam.

Voorbeeld

In dit voorbeeld zullen alle HTML-elementen met class="center" rood en centraal uitgelijnd zijn:

.center {
  text-align: center;
  color: red;
}

Probeer het zelf uit

U kunt ook specifieke HTML-elementen specificeren die beïnvloed worden door de klasse.

Voorbeeld

In dit voorbeeld zal alleen het <p>-element met class="center" centraal uitgelijnd zijn:

p.center {
  text-align: center;
  color: red;
}

Probeer het zelf uit

HTML-elementen kunnen ook meerdere klassen gebruiken.

Voorbeeld

In dit voorbeeld zal het <p>-element zich richten op de stijlinstellingen van class="center" en class="large":

<p class="center large">Deze alinea verwijst naar twee klassen.</p>

Probeer het zelf uit

Let op:De naam van een klasse mag niet beginnen met een cijfer!

CSS algemene selector

De algemene selector (*) selecteert alle HTML-elementen op de pagina.

Voorbeeld

De onderstaande CSS-regels beïnvloeden elk HTML-element op de pagina:

* {
  text-align: center;
  color: blue;
}

Probeer het zelf uit

CSS groeperingsselector

Groeperingsselectors kiezen alle HTML-elementen met dezelfde stijldefinitie.

Zie hieronder het CSS-code (h1, h2 en p-elementen hebben dezelfde stijldefinitie):

h1 {
  text-align: center;
  color: red;
}
h2 {
  text-align: center;
  color: red;
}
p {
  text-align: center;
  color: red;
}

Het is het beste om selectors te groeperen om de code zo veel mogelijk te verkorten.

Om selectors te groeperen, gebruik dan een komma om elke selector te scheiden.

Voorbeeld

In dit voorbeeld groeperen we de selectors uit de bovenstaande code:

h1, h2, p {
  text-align: center;
  color: red;
}

Probeer het zelf uit

Alle eenvoudige CSS selectors

Selector Voorbeeld Voorbeeld beschrijving
.class .intro Selecteer alle elementen met de class="intro".
#id #firstname Selecteer het element met id="firstname".
* * Selecteer alle elementen.
element p Selecteer alle <p> elementen.
element,element,.. div, p Selecteer alle <div> elementen en alle <p> elementen.

Uitgebreide lezing

Extra boeken:CSS element selectie

Extra boeken:CSS selectorgroepering

Extra boeken:CSS class selectie gedetailleerd

Extra boeken:CSS ID selectie gedetailleerd

Extra boeken:CSS eigenschap selectie gedetailleerd

Extra boeken:CSS nakomeling selectie

Extra boeken:CSS kind element selectie

Extra boeken:CSS naaste broer selectie