Het groeperen van selectors

Tot nu toe hebben onze selectors zich gericht op één ID, één class, of één type HTML element. Het is echter belachelijk eenvoudig om meerdere elementen tegelijk te selecteren. Op deze manier kan je dezelfde stijlregels op meer dan één element tegelijkertijd toepassen: zet hun namen in één selector van elkaar gescheiden door komma's en klaar is Kees! Dit is alweer een voorbeeld van hoe gemakkelijk het is om CSS regels te hergebruiken. Je hoeft niet steeds opnieuw dezelfde regels te declareren voor verschillende elementen/classes, maar je zet gewoon hun namen bij elkaar in één selector. Hier is een klein maar leuk voorbeeld:

<style type="text/css">
h1, h2, h3 {
	color: Maroon;
}
</style>

<h1>Main header</h1>

<h2>Header level 2</h2>

<h3>Header level 3</h3>

We zien hier dat h1, h2 en h3 elementen dezelfde stijlregel krijgen zonder dat het nodig is deze regel drie keer te herhalen. Je kan allerlei types selector namen in één selector combineren zoals in het volgende voorbeeld:

h1#main, h2.sub, h3, .someClass, #anID {
	color: Maroon;
}

Het mooie is dat je - dankzij het cascade ("waterval") gedrag van CSS - regels kan toevoegen aan elementen die al eerder regels toegekend hebben gekregen. De browser past ze toe onder het motto "de laatste regel telt". De regels worden namelijk op precedent-basis toegepast (we komen hier later op terug). Bekijk het volgende voorbeeld:

<style type="text/css">
h1, h2, h3 {
	color: Maroon;
	text-align: center;
}

h1 {
	background-color: Silver;
	padding: 10px;
	text-align: left;
}

h2, h3 {
	background-color: Gray;
	padding: 5px;
}
</style>

<h1>Main header</h1>

<h2>Header level 2</h2>

<h3>Header level 3</h3>

Probeer het voorbeeld uit en let er op welke properties precies door de browser getoond worden. We hebben eerst namen van drie HTML elementen in een selector gegroepeerd en twee gemeenschappelijke properties toegekend. Daarna hebben we sommige eigenschappen van sommige elementen overschreven door nieuwe regels.

Samenvatting

Het groeperen van element- en attribuutnamen in één selector vergemakkelijkt hergebruik van CSS regels, terwijl flexibiliteit behouden blijft. Als een gemeenschappelijke regel gedeclareerd wordt voor een stel elementen tegelijk, dan zit je er niet aan vast; je kan zo'n regel overschrijven voor ieder element of groep van elementen afzonderlijk.