Selectors

Stylesheets Selectors

We hebben al twee manieren gezien om aan te geven op welke elementen we een bepaalde stijl van toepassing willen laten zijn. Namelijk via een class (.belangrijk) en via de tagname (h3). Deze patronen waarmee je aangeeft welke elementen je 'selecteert' om een bepaalde stijl te hebben hebben noemen we selectors

Hieronder geven we een lijst van voorbeelden van veel gebruikte selectors:

* Selecteert alle elementen
.belangrijk Selecteert alle elementen met het attribuut class="belangrijk"
#content Selecteert het element met het attribuut id="content"
h3 Selecteert alle h3 elementen
h3, h4 Selecteert alle h3 en h4 elementen
article h3 Selecteert alle h3 elementen die zich binnen een article element bevinden
article > h3 Selecteert alle h3 elementen die zich direct binnen een article element bevinden. De h3 mag bijvoorbeeld niet in een div in een article staan, maar moet direct in de article staan.

We kunnen de verschillende selectors ook combineren:

div#content p

Deze regel betekent: alle p elementen die zich binnen een div met het attribuut id="content" bevinden.

Sterretje selector

Met het sterretje selecteer je alle elementen. Je kunt dus aan alle elementen tegelijk dezelfde stijlregels geven. Deze selector wordt niet veel gebruikt.



* {
  color: red;
}


<p>Sterretje selecteert alle elementen! Waaronder:</p>
<div>Een div</div>
<h3>Een header</h3>
<p>En een paragraaf</p>

Element selector

Ok, sterretje is misschien wat te breed. Maar we kunnen ook alle elementen van een bepaalde tag selecteren met behulp van de element selector.



div {
  color: red;
}


<p>De element selector is wat specifieker
  en selecteert alle elementen van een
  bepaald type.</p>
<div>Een div</div>
<h3>Een header</h3>
<p>Een paragraaf</p>
<div>Nog een div</div>

Verander de selector om juist de header in plaats van de div rood de maken

Class selector

Element selectors zijn handig, maar soms gelden dezelfde stijlregels voor een groep elementen die niet met dezelfde tag zijn te selecteren. Of juist dat je niet alle elementen met dezelfde tag wilt selecteren, maar slechts een aantal daarvan. In al deze gevallen kunnen we deze elementen in de HTML een class meegeven en via de CSS de gewenste opmaak geven.

In de CSS geven we class selectors aan met een . gevolgd door de naam van de class.

Elementen kunnen meerdere classes hebben



.belangrijk {
  color: red;
}


<div>Een div</div>
<div class="belangrijk">Een belangrijke div</div>
<h3>Een header</h3>
<h3 class="belangrijk">Een belangrijke header</h3>

Maak nog een derde element belangrijk

Voeg een extra stijlregel toe die elementen met de class "blauw", blauw maakt. Test deze door de class een element toe te voegen.

ID selector

Sommige stijlregels zijn maar van toepassing op één enkel element. In dat geval is het toepasselijk om deze te selecteren met een id. Een id moet namelijk uniek zijn op de pagina.

In de CSS geven we ID selectors aan met een # gevolgd door de naam van de id



#anders {
  color: red;
}


<div>Een div</div>
<div id="anders">Een div met een id "anders"</div>
<div id="nogeentje">Nog een div</div>

Maak de laatste div rood met de ID selector

Komma selector

Als we de element selector voor meerdere soorten elementen willen gebruiken kunnen we deze combineren met de komma selector:



h2, h3 {
  color: red;
}


<h1>Grote header</h1>
<h2>Minder grote header</h2>
<h3>Kleine header</h3>

Maak naast de h2 en de h3 ook de h1 rood

Spatie selector

Met de spatie selector kunnen we een groep elementen selecteren die zich binnen een bepaald element bevinden. Bijvoorbeeld alle lijst items in een menu



#hoofdmenu li {
  list-style-type: square;
}


<ul id="hoofdmenu">
  <li>Item 1</li>
  <li>Item 2
    <ul>
      <li>Subitem 1</li>
      <li>Subitem 2</li>
    </ul>
  </li>
  <li>Item 3</li>
</ul>

Maak alleen de subitems rood

Pijltje selector (>)

De > selector werkt bijna hetzelfde als de spatie selector. Maar selecteert alleen elementen die zich direct binnen een ander element bevindt. Vergelijk onderstaand voorbeeld eens met het bovenstaande.



#hoofdmenu > li {
  list-style-type: square;
}


<ul id="hoofdmenu">
  <li>Item 1</li>
  <li>Item 2
    <ul>
      <li>Subitem 1</li>
      <li>Subitem 2</li>
    </ul>
  </li>
  <li>Item 3</li>
</ul>

Pseudoclasses

Selectors zoals :first-child en :hover heten 'pseudoclasses' en bieden extra functionaliteit die normale selectors niet kunnen bieden. Hieronder staan een paar voorbeelden. Als je zoekt op internet vind je er nog meer.



li:first-child {
  color: red;
}

li:last-child {
  color: blue;
}

li:hover {
  color: yellow;
}


<ul>
  <li>Ga met de muis over de items heen</li>
  <li>Item 2
    <ul>
      <li>Subitem 1</li>
      <li>Subitem 2</li>
    </ul>
  </li>
  <li>Item 3</li>
</ul>

Even oefenen

Vind je het nog lastig? Probeer dan eens bij onderstaande tekst de volgende selectors te maken:

Maak alleen de elementen met de class 'belangrijk' rood

Maak alleen blokje1 rood

Maak alleen de belangrijke header binnen blokje1 rood. Hint: Combineer de uitwerking van de vorige twee oefeningen.



/* Verander '.eerste' in een andere
   selector om de opdracht te maken */
.eerste {
  color: red;
}


<div id="blokje1">
  <h3 class="eerste">Eerste onderwerp</h3>
  <h3>Tweede onderwerp</h3>
  <h3 class="belangrijk">Belangrijk! Maak alleen mij rood</h3>
</div>

<hr>

<div id="blokje2">
  <h3 class="eerste">Eerste onderwerp in blokje twee</h3>
  <h3 class="belangrijk">Belangrijk in blokje 2</h3>
  <h3>Laatste onderwerp</h3>
</div>

Kom je niet uit de laatste oefening? Bekijk dan het antwoord