We hebben vandaag een korte, maar erg handige webtip. Veel mensen, en vooral beginners, weten niet dat het mogelijk is om meerdere class names te gebruiken. Vandaag gaan we kijken hoe je dit kunt toepassen en hoe simpel het eigenlijk is. Op deze manier kun je sneller en met minder code werken! Laten we maar direct eens kijken hoe dit in zijn werk gaat met een voorbeeldje.

Scheiden door een spatie

Je kunt meerdere class names gebruiken in je HTML door ze simpelweg te scheiden met een spatie. Kijk maar eens naar het onderstaande voorbeeld.

     De tekst hier

Het div-element heeft nu 2 classes mee gekregen in plaats van de gebruikelijke 1: 'red' en 'border'. Als we in onze CSS stylesheet nu het volgende zetten:

.red {
    color: #f00;
}

.border {
    border: 1px solid #000;
}

Je zult zien dat het div-element nu een rand heeft en de tekst daarin rood gekleurd is. Wil je nu een ander element ook een zwarte rand geven, dan kun je gewoon simpelweg de class name 'border' aanroepen. Op deze manier kun je dus veel sneller werken, doordat je niet voor elk element dat je, in ons geval, een border wilt meegeven een nieuwe class name hoeft aan te maken!

Volgorde is van belang!

Let echter wel op de volgorde in je stylesheet.

     De tekst hier

.red {
    color: #f00;
}

.blue {
    color: #00f;
}

Dit zal de tekst een blauwe kleur geven. Alleen de volgorde in je stylesheet is dus van belang! Zou je '.red' en '.blue' omdraaien, dan krijg je, zoals je wellicht al verwacht, rode tekst.