Classes combineren

Om je css code te optimaliseren en korter te maken kan je meerdere classes aan een element geven. We beginnen met een voorbeeld. Stel je hebt een blog. Elk bericht staat in een div ‘post’. Nu wil je een paar berichten meer laten opvallen door ze bijvoorbeeld een ander kleur te geven.

1. De html

<div class="bericht">Een gewoon bericht.</div>
<div class="bericht groen">Een bericht in het groen.</div>

Aan de eerste div geven we dus de class ‘bericht’. Aan de tweede geven we 2 classes, ‘bericht’ en ‘groen’. De classes worden gescheiden door een spatie.

2. De css

.bericht {
width:200px;
border:1px solid #000;
background-color:#F2F2F2;
}
 
.groen {
color:#33CC00;
}

We geven dus elke div als basis de class ‘bericht’. Als je wil kan je ze nog uitbreiden door er een class ‘groen’ aan toe te voegen.