CSS Selector Grouping

Selectorgroepering

Stel dat je h2-elementen en paragrafen allemaal grijs wilt. De eenvoudigste manier om dit te bereiken is door de volgende verklaring te gebruiken:

h2, p {color:gray;}

Plaats de h2 en p selectoren aan de linkerkant van de regel, gevolgd door een komma, en je definieert een regel. De stijl aan de rechterkant (color:gray;) wordt toegepast op de elementen die door deze selectoren worden geselecteerd. De komma laat de browser weten dat de regel twee verschillende selectoren bevat. Zonder deze komma zou de betekenis van de regel compleet anders zijn. Zie ook nakomelingenselectoren.

Je kunt een willekeurig aantal keuzersamenstellen groeperen, er zijn geen beperkingen.

Bijvoorbeeld, als je veel elementen in grijs wilt weergeven, kun je een regel zoals onderstaande gebruiken:

body, h2, p, tabel, th, td, pre, sterk, em {kleur: grijs;}

Tip:Door te groeperen kunnen makers bepaalde soorten stijlen 'comprimeren', waardoor een eenvoudiger stijlblad ontstaat.

De volgende twee regelgroepen leveren hetzelfde resultaat op, maar het is duidelijk te zien welke makkelijker te schrijven is:

/* geen groepering */
h1 {kleur: blauw;}
h2 {kleur: blauw;}
h3 {kleur: blauw;}
h4 {kleur: blauw;}
h5 {kleur: blauw;}
h6 {kleur: blauw;}
/* groepering */
h1, h2, h3, h4, h5, h6 {kleur: blauw;}

Try It Yourself

Groeperen biedt enkele interessante keuzes. Bijvoorbeeld, in het volgende voorbeeld zijn alle regelgroepen equivalent, elke groep toont slechts een andere manier om keuzeraden en declaraties te groeperen:

/* groep 1 */
h1 {kleur: zilver; achtergrond: wit;}
h2 {kleur: zilver; achtergrond: grijs;}
h3 {kleur: wit; achtergrond: grijs;}
h4 {kleur: zilver; achtergrond: wit;}
b {kleur: grijs; achtergrond: wit;}
/* groep 2 */
h1, h2, h4 {kleur: zilver;}
h2, h3 {achtergrond: grijs;}
h1, h4, b {achtergrond: wit;}
h3 {kleur: wit;}
b {kleur: grijs;}
/* groep 3 */
h1, h4 {kleur: zilver; achtergrond: wit;}
h2 {kleur: zilver;}
h3 {kleur: wit;}
h2, h3 {achtergrond: grijs;}
b {kleur: grijs; achtergrond: wit;}

probeer het zelf:

Let op, in groep 3 is 'verklaringgroepering' gebruikt. We zullen later meer over 'verklaringgroepering' vertellen.

Sterrenkeuzekeuze

CSS2 introduceerde een nieuwe eenvoudige keuze - de sterrenkeuzekeuze (universal selector), weergegeven als een ster (*). Deze keuze kan met elk element worden gecombineerd, net als een jokerteken.

Bijvoorbeeld, de volgende regel maakt elk element in het document rood:

* {color:red;}

Try It Yourself

Deze verklaring is equivalent aan het opnoemen van een groeperingskeuze voor alle elementen in het document. Met behulp van een sterrenkeuzekeuze, hoef je slechts één keer te drukken (slechts één ster) om de waarde van de color-eigenschap van alle elementen in het document in te stellen op 'red'.

Verklaringgroepering

Je kunt zowel keuzers als verklaringen groeperen.

Stel dat je wilt dat alle h1-elementen een rode achtergrond hebben en de tekst blauw worden weergegeven met een Verdana-lettertype van 28 pixels hoog, dan kun je de volgende stijl schrijven:

h1 {font: 28px Verdana;}
h1 {color: blue;}
h1 {background: red;}

Maar deze manier van werken is niet efficiënt. Vooral als je een lijst van stijlen voor een element met meerdere stijlen maakt, kan dit erg vervelend zijn. In plaats daarvan kunnen we de verklaringen samenstellen:

h1 {font: 28px Verdana; color: white; background: black;}

Dit heeft hetzelfde effect als de vorige 3 regels van de stijltafel.

Let op, het is belangrijk om de verklaringen te groeperen, waarbij op de laatste verklaring een puntkomma moet worden gebruikt. Browsers negeren witruimte in de stijltafel. Zodra er een puntkomma is toegevoegd, kan men zonder enige zorgen de volgende indeling gebruiken om stijlen op te bouwen:

h1 {
  font: 28px Verdana;
  color: blue;
  background: red;
  }

Try It Yourself

Hoe, is de leesbaarheid van deze schrijfwijze niet sterker?

Maar als de tweede puntkomma wordt genegeerd, zal de gebruikersagent de stijltafel als volgt interpreteren:

h1 {
  font: 28px Verdana;
  color: blue background: red;
  }

Try It Yourself

Omdat 'background' geen geldige waarde is voor 'color', en omdat alleen een keyword voor 'color' kan worden opgegeven, zal de gebruikersagent deze color-statement volledig negeren (inclusief 'background: black'). De h1-titel zal alleen blauw worden weergegeven, zonder een rode achtergrond, hoewel het zeer waarschijnlijk is dat de h1 helemaal geen blauwe kleur krijgt. In plaats daarvan zullen deze titels alleen de standaardkleur worden weergegeven (meestal zwart) en er zal geen achtergrondkleur zijn. De 'font: 28px Verdana'-verklaring werkt nog steeds normaal, omdat deze inderdaad correct eindigt met een puntkomma.

Like selector grouping, declaration grouping is also a convenient method that can shorten the stylesheet, making it clearer and easier to maintain.

Tip:It is a good habit to also add a semicolon after the last declaration in a rule. When adding another declaration to the rule, you don't have to worry about forgetting to insert a semicolon.

Combining Selector and Declaration Grouping

We can combine selector grouping and declaration grouping in a rule to define relatively complex styles with fewer statements.

The following rule specifies a complex style for all titles:

h1, h2, h3, h4, h5, h6 {
  color:gray;
  background: white;
  padding: 10px;
  border: 1px solid black;
  font-family: Verdana;
  }

Try It Yourself

The following rule defines the style for all titles as gray text with a white background, with a padding of 10 pixels, and a solid border of 1 pixel, with the text font as Verdana.