In ons laatste artikel over selectoren zullen we combinatoren en meervoudige selectoren verkennen: twee manieren om meerdere selectoren te combineren om zo ons arsenaal van  selectiemethoden verder uit te breiden.

Combinatoren

Een selector per keer gebruiken is nuttig, maar kan soms inefficiënt zijn.  CSS selectoren worden krachtiger wanneer je ze combineert om zeer nauwkeurige selecties te maken.  CSS heeft verschillende manieren om elementen te selecteren op basis van de relatie tot andere elementen.  Die relaties worden uitgedrukt door deze mogelijke combinatoren:

Combinator Selectie
A, B Elk element A en/of element B (zie ook de Multiple selectors on one rule, hieronder).
A B Elk element B dat een afstammeling is van een element A (een kind, een kleinkind, ... ).
A > B Elk element B dat een kind is van een element A.
A + B Elk element B dat de volgende bruster (broer / zus) is van een element A (= het volgende kind van dezelfde ouder).
A ~ B Elk element B dat één van de volgende brusters (broer / zus) is van een element A (= één van de volgende kinderen van dezelfde ouder).

Voorbeeld van combinatoren

Laten we kijken naar een voorbeeld van deze selectoren in actie, eerst de HTML:

<table lang="en-US" class="with-currency">
  <thead>
    <tr>
      <th scope="col">Product</th>
      <th scope="col">Qty.</th>
      <th scope="col">Price</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th colspan="2" scope="row">Total:</th>
      <td>148.55</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Lawnchair</td>
      <td>1</td>
      <td>137.00</td>
    </tr>
    <tr>
      <td>Marshmallow rice bar</td>
      <td>2</td>
      <td>1.10</td>
    </tr>
    <tr>
      <td>Book</td>
      <td>1</td>
      <td>10.45</td>
    </tr>
  </tbody>
</table>

We gebruiken volgend stylesheet:

/* Basic table setup */
table {
  font: 1em sans-serif;
  border-collapse: collapse;
  border-spacing: 0;
}

/* All <td>s within a <table> and all <th>s within a <table>
   Comma is not a combinator, it just allows you to target
   several selectors with the same CSS ruleset */
table td, table th {
  border : 1px solid black;
  padding: 0.5em 0.5em 0.4em;
}

/* All <th>s within <thead>s that are within <table>s */
table thead th {
  color: white;
  background: black;
}

/* All <td>s preceded by another <td>,
   within a <tbody>, within a <table> */
table tbody td + td {
  text-align: center;
}

/* All <td>s that are a last child,
   within a <tbody>, within a <table> */
table tbody td:last-child {
  text-align: right
}

/* All <th>s, within a <tfoot>s, within a <table> */
table tfoot th {
  text-align: right;
  border-top-width: 5px;
  border-left: none;
  border-bottom: none;
}

/* All <td>s preceded by a <th>, within a <table> */
table th + td {
  text-align: right;
  border-top-width: 5px;
  color: white;
  background: black;
}

/* All pseudo-elements "before" <td>s that are a last child,
   appearing within elements with a class of "with-currency" that
   also have an attribute "lang" with the value "en-US" */
.with-currency[lang="en-US"] td:last-child::before {
  content: '$';
}

/* All pseudo-elements "after" <td>s that are a last child,
   appearing within elements with the class "with-currency" that
   also have an attribute "lang" with the value "fr" */
.with-currency[lang="fr"] td:last-child::after {
  content: ' €';
}

Dit geeft ons de volgende set van leuk gestijlde tabellen:

Actief leren: Schrijf je eigen combinatoren

Het bovenstaande voorbeeld was ontworpen om de complexiteit te tonen die je kan bereiken met behulp van combinatoren.  In deze actief leren schrijf je zelf combinatoren.  In deze oefening moet je selectoren toevoegen aan regels 2–4, om zo:

  1. Links te stijlen, maar enkel diegene die in een ongeordende lijst staan.
  2. Links te stijlen in een ongeordende lijst, maar alleen wanneer je erboven zweeft met de muis.
  3. Paragrafen te stijlen die direct na de belangrijkste hoofding komen.

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.

Meerdere selectoren op één regel

Je hebt hier al meermaals een voorbeeld van gezien, maar we verduidelijken het nog eens voor de zekerheid. Je kan meerdere selectoren schrijven, gescheiden door kommas, om zo dezelfde regel toe te passen op meerdere sets van geselecteerde elementen.  Bijvoorbeeld:

p, li {
  font-size: 1.6em;
}

Of nog:

 h1, h2, h3, h4, h5, h6 {
  font-family: helvetica, 'sans serif';
}

Wat nu?

Proficiat!  Je bent aan het einde gekomen van een lange reis over selectoren.  Zelfs de meest ervaren webdeveloppers zijn nog steeds verbaasd over wat je kan bereiken met selectoren.  Voel je dus niet slecht als je niet alle mogelijkheden kan onthouden: bookmark de overzichtspagina voor selectoren en gebruik die als referentie indien nodig.

In ons volgende artikel bespreken we een andere fundamenteel CSS onderwerp: de soorten waarden die een eigenschap kan hebben en welke eenheden er gebruikt worden om lengte, kleur en andere waarden uit te drukken.  We verkennen dus CSS waarden en eenheden.

Documentlabels en -medewerkers

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