De Class selector

Tot nu toe zijn we alleen element selectors tegen gekomen; deze selecteren per definitie alleen standaard HTML elementen (gedefinieerd met een HTML tag). We worden nu wat specifieker door class (klasse) selectors in te voeren. Deze selecteren niet gelijknamige HTML elementen, maar richten ze zich op alle elementen met dezelfde class attribuut, of nauwkeuriger gezegd, ze selecteren alle HTML elementen met gelijknamige class attributen.

Enerzijds vernauwt de class selector de lijst van betrokken HTML elementen tot die met gelijknamig class attribuut, maar anderzijds verwijdt de selector deze lijst doordat verschillende type elementen (bijvoorbeeld <b>> en <i> tags) het doel van de selector kunnen worden. Voor een class selector is niet de naam van het element zelf van belang, maar de naam van zijn class attribuut.

De naam van een class selector begint met een punt (.), maar bestaat verder uit underscores, hyphens, letters en cijfers, net als de naam van een element selector. Het grootste verschil is dat terwijl de naam van een element selector een tag in een HTML document aanduidt, de naam van een class selector vrij is. De naam wordt gekozen door de CSS ontwikkelaar. Bijvoorbeeld:

• .red
• .myElements
• .navigation

Alleen elementen die een class attribuut bevatten met één of meer namen van class selectors (zonder de punt aan het begin van de naam!) krijgen de overeenkomstige stijlkenmerken. Laten we een voorbeeld geven:

<style type="text/css">  
.red {  
    color: Red;  
}  

.beautiful {  
    font-weight: bold;  
    color: Blue;  
    font-style: italic;  
}  
</style>  

<p class="red">  
    Here's some text - <span class="beautiful">this part is especially pretty!</span>  
</p>

This text is very normal!

Probeer het voorbeeld en zie wat er gebeurt onder veranderingen in de code. Merk op dat de twee delen van de alinea (<p>) volkomen verschillend weergegeven worden, omdat aan de alinea een class toegekend is die in het <span> element overschreven wordt door een andere class.

Merk op dat je de class selectors kan noemen wat je wil, maar het is aan te raden een beetje zinvolle namen te kiezen. De naam 'red' in het voorgaande voorbeeld is niet goed om twee redenen. In de eerste plaats kan het gebeuren dat de regel later uitgebreid wordt met de declaratie van een property die niets met kleur te maken heeft en dan slaat 'red' als een tang op een varken. In de tweede plaats is het niet onmogelijk dat iemand de elementen met class 'red' later liever groen heeft. Dan moet je alle documenten door om de class naam aan te passen (of de selector 'red' groene tekst te laten geven en dat is pas echt verwarrend). De naam 'beautiful' is veel neutraler omdat over smaak niet te twisten valt.

Classes specifiek voor één type element

In ons eerste voorbeeld zagen we class regels die toepasbaar waren op elk type HTML element (althans op elementen in het bezit van een class attribuut). Het kan wel eens voorkomen dat je een class regel wil beperken tot één bepaald type HTML element. Dit kan heel eenvoudig gedaan worden door een selector naam te kiezen bestaande uit de naam van het HTML element en de naam van de class. In onderstaand voorbeeld wordt de class regel ".beautiful" beperkt tot HTML elementen van het type <span>:

<style type="text/css">
span.beautiful {
    font-weight: bold;
    color: Blue;
    font-style: italic;
}
</style>

<p>
    Here's some <b class="beautiful">text</b> - <span class="beautiful">this part is especially pretty!</span>
</p>

Probeer het voorbeeld maar eens uit en merk hierbij op dat de class beautiful op twee punten wordt aangeroepen, in <b> en in <span>. Je ziet dat alleen het tweede element de stijl "beautiful" krijgt.

Meerdere classes

Je kan zoveel class regels maken als je wil en het class attribuut van HTML tags staat het toe dat je per tag meer dan één class specificeert. Het aardige hiervan is dat je vrij bent om verschillende class selectors te combineren in een en dezelfde HTML tag.

Dit betekent dat je in plaats van zeer specifieke regels - met declaraties van vele properties - die voor slechts weinig HTML elementen toepasbaar zijn, je veel minder specifieke regels kan schrijven en die kan combineren zoals je wilt. Die minder specifieke regels kunnen veel vaker toegepast worden en dit hergebruik van regels is een van de redenen waarom CSS is uitgevonden.

Bekijk maar eens dit voorbeeld:

<style type="text/css">
.status {
    padding: 5px;
    margin: 5px;
    border-width: 1px;
    border-style: solid;
}

.error {
    color: Red;
    border-color: Maroon;
}

.information {
    color: Blue;
    border-color: Navy;
}
</style>

<div class="status error">
    This is an error!
</div>

<div class="status information">
    This is information!
</div>

Met behulp van CSS verschaffen we gebruikersvriendelijk status info. Er is een selector die gedeeld wordt door fouten- en voortgangsboodschappen. Deze boodschappen hebben het een en ander gemeenschappelijk in hun opmaak, maar ook verschillen. Hun gemeenschappelijke properties zetten we in een regel met de selector ".status" en de rest van de opmaak zetten we in ".error" en ".information". Deze class selectors plaatsen we vervolgens in de class attributen van <div>'s gescheiden door één of meer spaties (geen komma's!).

Zonder de gemeenschappelijke class .status zouden we alle declaraties van .status moeten herhalen in zowel .error als in .information. Dit zou verspilling van bandbreedte zijn en bovendien moeten we eventuele veranderingen van opmaak - zoals bijvoorbeeld dikkere randen - op meer plekken aanbrengen.

Samenvatting

We hebben aangetoond dat CSS classes erg veelzijdig zijn - ze kunnen zeer specifiek zijn maar ook zeer algemeen, net wat je wil. Je kan de class selector toepassen op elk type HTML element, maar dat hoeft niet: HTML elementen zonder toegekende class attribuut zijn prima. De class selector is het meest flexibele type selector in CSS. In het volgende hoofdstuk zullen we de zeer specifieke ID selector behandelen.