CSS Selectors

CSS selectors worden gebruikt om HTML elementen die je wil vormgeven te selecteren of te "vinden".

De verschillende CSS selectors:

  • Simple selectors: selecteren elementen op basis van elementnaam, class, of id.
  • Combinator selectors: selecteren elementen op basis van een bepaalde relatie tussen de elementen.
  • Pseudo class selectors: selecteren elementen op basis van een bepaalde toestand, bijvoorbeeld wanneer je met de muis over het element gaat (hoveren).
  • Attribute selectors: selecteren elementen op basis van een bepaald attribuut of de waarde van een attribuut.

De CSS element selector:

De element selector selecteert elementen op basis van de naam van het element.

In onderstaand voorbeeld worden alle <p> elementen geselecteerd, ze worden gecentreerd en in het rood weergegeven.


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

De CSS id selector

  • De id selector gebruikt het id attribuut om een bepaald element te selecteren.
  • Het id van een element is uniek voor de webpagina, dus de id selector selecteert één bepaald element op de pagina.
  • Om een element met een specifiek id te selecteren schrijf je een # (hash) gevolgd door de naam van het id van het element
    
 
      #mijnElement {
        color: blue;
        font-weight: bold;
      }
                  
    
<p id="mijnElement">Dit is een voorbeeld van een ID-selector.</p>

De CSS class selector

De CSS-selector selecteert alle elementen met een specifiek class-attribuut.

Om elementen te selecteren met een bepaalde class, schrijf je een punt (.) gevolgd door de naam van de class. Classnamen kunnen niet beginnen met een nummer.


/* Dit selecteert alle elementen met de class "center" 
   en geeft ze een rode kleur en centreren de tekst. */
.center {
  text-align: center;
  color: red;
}

Je kunt ook specifieke elementen selecteren met een bepaald class-attribuut.


/* Dit selecteert alleen de <p> elementen met de class "center" 
   en geeft ze een rode kleur en centreren de tekst. */
p.center {
  text-align: center;
  color: red;
}

Je kunt ook verwijzen naar meer dan één class.



<p class="center large">

Deze alinea verwijst naar twee classes (.center en .large).

De CSS grouping selector

De grouping selector selecteer alle HTML elementen die dezelfde stijl moeten hebben.

In onderstraande CSS code hebben de <h1>, <h2> en de <p> elementen dezelfde stijldefinitie.

Opgelet op de schrijfwijze: selectors gescheiden door een komma+spatie.

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

De CSS universal selector

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

In onderstaand voorbeeld worden alle elementen op de pagina gecentreerd en in het blauw weergegeven.


/* Dit selecteert alle elementen op de pagina 
   en geeft ze gecentreerde tekst en een blauwe kleur. */
* {
  text-align: center;
  color: blue;
}

Toepassing van CSS op de pagina

Wanneer een browser de CSS-stylesheet leest, zal deze de webpagina weergeven zoals beschreven in de stylesheet.

Top