CSS Selectors


CSS Selectors

CSS selectors worden gebruikt om de HTML-elementen die u wilt stijl "vinden" (of te selecteren).

We kunnen CSS selectors verdelen in vijf categorieën:

Deze pagina zal de CSS eenvoudige selectors verklaren.


De CSS element Selector

Het element selector HTML elementen op basis van de elementnaam.

 

CSS Voorbeeld:

Hier, zijn alle <p> elementen op deze pagina in het center uitgelijnd, met een rode tekstkleur:

 
 

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

 
   

De CSS id Selector

De id selector maakt gebruik van het id attribuut van een HTML-element om een specifiek element te selecteren.

De id van een element is uniek binnen een pagina, zodat de id selector wordt gebruikt om een uniek element selecteren!

Om een element met een specifiek id, schrijf een hekje (#) karakter, gevolgd door de id van het element.

 

CSS Voorbeeld:

De CSS-regel hieronder zal worden toegepast op het HTML-element met id = "para1":

 
 

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

 
   

 
Opmerking: Een id naam kan niet beginnen met een nummer!

De CSS class Selector

De class selector HTML-elementen met een bepaald class attribuut.

Om elementen met een bepaalde class te maken, schrijf een punt(.)karakter, gevolgd door de naam van de class.

 

CSS Voorbeeld:

In dit voorbeeld worden alle HTML-elementen met de class = "center" zijn rood en staan gecentreerd:

 
 

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

 
   

U kunt ook aangeven dat alleen specifieke HTML-elementen moeten worden beïnvloed door een class.

 

CSS Voorbeeld:

In dit voorbeeld zullen enkel de <p>elementen met class = "center" centraal uitgelijnd worden:

 
 

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

 
   

HTML-elementen kunnen ook verwijzen naar meer dan één class.

 

CSS Voorbeeld:

In dit voorbeeld wordt het element <p> gestyld volgens class = "center" en class = "large"

 
 

<p class=" center large"> Deze paragraaf verwijst naar twee classes. </p>

 
   

Opmerking: Een class naam kan niet beginnen met een nummer!

De CSS Universal Selector

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

 

CSS Voorbeeld:

De CSS-regel hieronder zal invloed hebben op elk HTML-element op de pagina:

 
 

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

 
   

De CSS Groepering Selector

De groepering selector selecteert alle HTML-elementen met dezelfde stijl definities.

Kijk naar de volgende CSS-code (de H1, H2 en p elementen hebben dezelfde stijl definities):

   
 

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

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

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

 
   

Het is beter om de selectors te groeperen, om de code te minimaliseren

Groep selectoren, door iedere selector te scheiden met een komma.

 

CSS Voorbeeld:

In dit voorbeeld hebben we de selectoren van de bovenstaande code gegroepeerd:

 
 

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

 
   

 


Alle simpele CSS Selectors

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