Classes Combineren in CSS 2

Dit artikel gaat over het combineren van classes in CSS 2. Deze mogelijkheid is nieuw in CSS 2 en was dus nog niet aanwezig in CSS level 1. Het voordeel van het combineren van classes is dat je minder code nodig hebt om een bepaald stijleffect te bereiken. Het is een handige tip voor iedereen die met Cascading Style Sheets werkt.

Het lijkt me het beste om het bovenstaande maar met een paar voorbeelden te verduidelijken.

Hieronder zie je twee vakken met tekst:

Als er alleen CSS 1 zou zijn dan zou je voor ieder van bovenstaande tekstvakken een aparte class moeten maken. De classes zouden bestaan uit dezelfde code, alleen de achtergrondkleuren zouden verschillen.

Je kreeg dan deze code:

.groentekstvak {
   width: 150px;
   background-color: #99ffcc;
   border: solid 1px black;
   padding: 3px;
   margin: 4px 2px 4px 2px;
}

.paarstekstvak {
   width: 150px;
   background-color: #cc99ff;
   border: solid 1px black;
   padding: 3px;
   margin: 4px 2px 4px 2px;
}

Dit is natuurlijk niet erg efficiënt. Daarom is er in CSS 2 dus de mogelijkheid geschapen om verschillende classes te combineren.

In CSS 2 kunnen we nu de code voor het tekstvak in één class zetten en aparte classes maken voor de verschillende achtergrondkleuren.

.tekstvak {
   width: 150px;   
   border: solid 1px black;
   padding: 3px;
   margin: 4px 2px 4px 2px;
}

.groen { background-color: #99ffcc; }
.paars { background-color: #cc99ff; }
.geel { background-color: #ff99ff; }

We kunnen nu de classes "tekstvak" en de classes voor de achtergrondkleur eenvoudig combineren. Met deze HTML code:

<div class="tekstvak groen">
Dit is het groene tekstvak.
</div>

<div class="tekstvak paars">
En dit het paarse tekstvak.
</div>

<div class="tekstvak geel">
En nog een geel tekstvak.
</div>

Je zet de classes dus gewoon achter elkaar in de HTML code. Je moet er wel een spatie tussen zetten. Het maakt verder niet uit welke class je voorop zet: "tekstvak geel" en "geel tekstvak" zijn dus allebei correct.

We krijgen dan het volgende resultaat op het scherm:

Je ziet hoe handig dit is. Er zijn natuurlijk nog veel meer mogelijkheden voor het combineren van classes. Hierboven hebben we de achtergrondkleur in een tekstvak als voorbeeld gebruikt, maar je kunt bijvoorbeeld op deze manier ook eenvoudig een aparte class maken voor vetgedrukte tekst, onderstreepte tekst en nog veel meer dingen. Je kunt op deze manier een hoop tijd en code besparen.

MijnHomepage Tip