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