In ons eerste artikel over selectoren leren we meer over de "eenvoudige" selectoren, zo genoemd omdat ze rechtstreeks één of meer elementen in een document selecteren, gebaseerd op het type element (of hun class of id).

Type selectoren (beter bekend als element selectoren)

Deze selector is een niet-hoofdlettergevoelige selectie van alle HTML elementen die overeenkomen met de selector.  Dit is de eenvoudigste manier om alle elementen van een bepaald type te selecteren.  Laten we kijken naar een voorbeeld:

Hier is wat HTML:

<p>What color do you like?</p>
<div>I like blue.</div>
<p>I prefer red!</p>

Een eenvoudige stylesheet:

/* All p elements are red */
p {
  color: red;
}

/* All div elements are blue */
div {
  color: blue;
}

Wat ons samen het volgende geeft:

Actief leren: Verschillende elementen selecteren

Voor deze actief leren zouden we graag hebben dat je probeert de selector te wijzigen van de CSS regel, zodanig dat er verschillende types elementen gestijld worden.  Weet je hoe je een selector moet schrijven die verschillende elementen stijlt in één enkele CSS regel?

Indien je een fout maakt kan je altijd herbeginnen met behulp van de Reset knop.  Als je er niet uit komt, kan je op de Show solution knop drukken om een mogelijk antwoord te zien.

Klasse selectoren

De klasse-selector bestaat uit een punt, '.', gevolgd door een klasse-naam.  Een klassenaam is elke waarde zonder spaties die in een HTML class attribuut geplaatst wordt.  Het is aan jou om een naam te kiezen voor de klasse.  Het is ook interessant om te weten dat meerdere elementen in een document dezelfde klasse kunnen krijgen, en dat één element meerdere klassen kan krijgen door ze te scheiden met spaties.  Hier is een kort voorbeeld:

Eerst de HTML:

<ul>
  <li class="first done">Create an HTML document</li>
  <li class="second done">Create a CSS style sheet</li>
  <li class="third">Link them all together</li>
</ul>

Een eenvoudig stylesheet:

/* The element with the class "first" is bolded */
.first {
  font-weight: bold;
}

/* All the elements with the class "done" are strike through */
.done {
  text-decoration: line-through;
}

En dit is het resultaat:

Actief leren: Omgaan met meerdere klassen

In deze actief leren zouden we graag hebben dat je probeert om het class-attribuut op de paragraaf elementen te vervangen.  Na de vervanging moeten er meerdere effecten actief zijn.  Probeer een base-box klasse toe te passen, samen met een rol-klasse (editor-note of warning), en optioneel ook een important indien je de doos veel belang wil geven.  Denk na over hoe dit soort van regels je toelaat om een modulair systeem van stijlen op te bouwen.

Indien je een fout maakt kan je altijd herbeginnen met behulp van de Reset knop.  Als je er niet uit komt, kan je op de Show solution knop drukken om een mogelijk antwoord te zien.

ID selectoren

De ID selector bestaat uit een hashtag (#), gevolgd door de ID naam van een bepaald element.  Eender welk element kan een unieke ID krijgen via het id attribuut.  Het is aan jou om te kiezen welke naam je aan de id geeft.  Deze selector is de meest efficiënte manier om één element te selecteren.

Belangrijk: Een ID moet uniek zijn in het document.  Indien eenzelfde ID meerdere malen voorkomt in hetzelfde document, is het gedrag niet voorspelbaar en afhankelijk van browser tot browser.  Sommige browsers zullen bv. enkel het eerste element met dat ID stijlen en de rest negeren.

Laten we kijken naar een kort voorbeeld — hier is wat HTML:

<p id="polite"> — "Good morning."</p>
<p id="rude"> — "Go away!"</p>

En de CSS:

#polite {
  font-family: cursive;
}

#rude {
  font-family: monospace;
  text-transform: uppercase;
}

Dat geeft ons het volgende als output:

Actief leren: de winnende kleuren toewijzen met IDs

In deze actief leren willen we de eerste, tweede en derde in een competitie een toepasselijke gouden, zilveren en bronzen "kleur" geven via CSS regels: 2–4 toepasselijke selectoren die de relevante elementen selecteren gebaseerd op hun ID.

Indien je een fout maakt kan je altijd herbeginnen met behulp van de Reset knop.  Als je er niet uit komt, kan je op de Show solution knop drukken om een mogelijk antwoord te zien.

Universele selector

De universele selector (*) is de ultieme joker. Hij laat toe om alle elementen in een pagina te selecteren.  Aangezien het zelden nuttig is om een stijl toe te passen op alle elementen in een pagina, wordt hij vaak gebruikt in combinatie met andere selectoren (meer informatie daarover bij  Combinators hieronder).

Belangrijk: Let op wanneer je de universele selector gebruikt.  Aangezien het van toepassing is op alle elementen, heeft gebruik in een grote webpagina merkbaar invloed op de performantie: webpagina's zullen trager laden dan verwacht.  Deze selector is slechts in een handjevol gevallen de beste keuze.

Een voorbeeld, met eerst de HTML:

<div>
  <p>I think the containing box just needed
  a <strong>border</strong> or <em>something</em>,
  but this is getting <strong>out of hand</strong>!</p>
</div>

Wat eenvoudige CSS:

* {
  padding: 5px;
  border: 1px solid black;
  background: rgba(255,0,0,0.25)
}

Die samen het volgende resultaat geven:

Combinatoren

Combinatoren staan je toe om meerdere selectoren te combineren, wat je toelaat om elementen in of naast andere elementen te selecteren.  Er zijn vier soorten:

  • De afstammeling-selector —  (spatie) — laat je toe om een element te selecteren dat ergens in een andere element genest is.  Dit hoeft niet noodzakelijk een directe afstammeling (=kind) te zijn, het kan ook een kleinkind of achterkleinkind, enz., zijn.
  • De kind-selector — > — laat je toe om een element te selecteren dat een rechtstreeks kind is van een andere element.
  • De volgende bruster (broer / zus) selector — + — laat je toe om een element te selecteren dat de volgende bruster is van het eerste element (maw. het eerste element erna dat op hetzelfde niveau staat).
  • De algemene bruster (broer / zus) selector — ~ — laat je toe om alle elementen te selecteren die op het zelfde niveau staan als een ander element.

Hier is een snel voorbeeld van hoe deze werken:

<section>
  <h2>Heading 1</h2>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
  <div>
    <h2>Heading 2</h2>
    <p>Paragraph 3</p>
    <p>Paragraph 4</p>
  </div>
</section>
section p {
  color: blue;
}

section > p {
  background-color: yellow;
}

h2 + p {
  text-transform: uppercase;
}

h2 ~ p {
  border: 1px dashed black;
}

De CSS stijlt de HTML zoals hieronder zichtbaar:

De selectoren werken als volgt:

  • section p selecteert alle  <p> elementen, zowel de eerste twee die rechtstreekse kinderen zijn van het <section> element als detwee die kleinkinderen zijn van het <section> element (ze zijn kinderen van de <div>). Alle paragraaf-tekst wordt bijgevolg blauw gekleurd.
  • section > p selecteert enkel de eerste twee <p> elementen, die kinderen zijn van het <section> element (maar niet de twee andere die geen kinderen zijn maar kleinkinderen). Enkel de eerste twee paragrafen hebben dus een gele achtergrondkleur.
  • h2 + p selecteert enkel de <p> elementen die vlak na de <h2> elementen komen op hetzelfde hiërarchische niveau — in dit geval de eerste en derde paragraaf.  Deze krijgen dan ook hun tekst volledig in drukletters.
  • h2 ~ p selecteert alle <p> elementen op hetzelfde hiërarchische niveau als de <h2> elementen (die na die h2 elementen komen) — in dit geval alle paragrafen.  Ze krijgen dus allemaal een gestreepte rand.

In het volgende artikel

Proficiat met het vervolledigen van onze eerste selector tutorial!  Hopelijk vond je het leuk om met de selectoren te spelen.  We keken nu naar enkele eenvoudige selectoren.  In het volgende artikel kijken we naar wat meer geavanceerde selectoren, te beginnen bij Attribuut selectoren.

Documentlabels en -medewerkers

 Aan deze pagina hebben bijgedragen: Badlapje
 Laatst bijgewerkt door: Badlapje,