Veel mensen denken dat het attribuut class de door het W3C bedachte link is met stylesheets. Door aan een element een class te hangen, kun je er opmaakstijlen voor in een stylesheet vastleggen, en er dus van alles mee doen. Helaas, dat klopt niet. Het is juist andersom: je hangt een stijl op aan een element, eventueel in combinatie met één of meer attributen (bijvoorbeeld class).

Elementen stijlen volgens de regels

Er is helemaal geen speciaal attribuut bedacht om een stijl aan te hangen. Volgens de W3C-specificaties kan dit namelijk met elk attribuut:

td[colspan] { text-align: center } /* centreert de text in tabelcellen met een colspan */
a[href="http://www.naarvoren.nl"] { color: green } /* kleurt alle links naar naarvoren groen */
p[lang|="en"] { font-variant: italic } /* drukt alle paragrafen met engelse text schuin */
a[rel~="external"] { color: red } /* kleurt alle links waar het woord "external" in het rel attribuut zit rood */

Achtereenvolgens selecteren we hier met:

[attr]

Elementen die het attribuut "attr" bevatten

[attr="value"]

Elementen waarvan het attribuut "attr" precies de waarde "value" heeft

[attr|="substr"

Elementen waarvan "substr" voorkomt in een door een hyphen (-) gescheiden reeks (hyphen seperated list) in het attribuut "attr" (bijvoorbeeld in lang attribuut, maar ook in het id, name of class attribuut)

[attr~="substr"]

Elementen waarvan "substr" voorkomt in een door een spatie gescheiden reeks (space separated list) in het attribuut "attr" (bijvoorbeeld in het class of alt attribuut)

Mooi geregeld, maar het probleem met deze regels code is dat ze geen van allen werken in Internet Explorer, een browser waar we meestal toch wel rekening mee moeten houden.

Nu zijn hier wel oplossingen aan de gebruikerskant voor, één ervan is Dean Edwards' IE7, maar daar gaan we hier verder niet op in. Laten we het weer gaan hebben over de functie van het class attribuut.

De functie van het class attribuut

Om elementen te stijlen hebben we dus helemaal geen speciaal attribuut nodig. We kunnen gewoon de bestaande elementnamen en attributen daarvoor gebruiken. Dus: Waar is het class attribuut dan wel voor? Het W3C zegt het volgende over class en id:

id = name [CS]

This attribute assigns a name to an element. This name must be unique in a document.

class = cdata-list [CS]

This attribute assigns a class name or set of class names to an element. Any number of elements may be assigned the same class name or names. Multiple class names must be separated by white space characters.

W3C: Element identifiers: the id and class attributes

Het id is voor de meeste mensen redelijk duidelijk: het is een unieke naam of identifier voor een element. Net zoals mensen zelf een naam hebben of een SoFi-nummer.

Het class-attribuut geeft aan tot welke klasse(n) een element behoort. Denk hierbij bijvoorbeeld aan een schoolklas of een beroep van een bepaald persoon. Net zoals mensen tot verschillende klassen kunnen behoren, kunnen elementen dat ook. Deze verschillende klassen kan je gescheiden door spaties opnemen in het attribuut.

Dit heeft nog helemaal niets met opmaak te maken, maar puur met het nauwkeuriger definiëren van je element. Dat helpt je als je gaat opmaken. Als je bijvoorbeeld een stukje letterlijke code op je pagina wilt zetten, dan doe je dat meestal via het pre element (of met het code element als het om inline code gaat). Nu is HTML-code anders dan bijvoorbeeld CSS, javascript of PHP-code en toch stop je ze allemaal in hetzelfde element. Om toch onderscheid te maken tussen deze verschillende soorten code, kun je het class attribuut gebruiken. Je geeft hiermee aan om welke subklasse van het element het hier gaat.

Elementen die tot een bepaalde klasse behoren zou je er misschien anders uit willen laten zien, zoals een politieagent en een brandweerman elk een eigen uniform hebben. Omdat je nu aangegeven hebt dat een element tot een bepaalde klasse behoort, kun je het nu makkelijk via je stylesheet van een ander uiterlijk voorzien:

pre[class="CSS"] { color: pink }
pre[class="HTML"] { color: darkblue }

Zo maak je CSS-code roze en HTML-code donkerblauw.

Natuurlijk is het redelijk voor de hand liggend dat het uiterlijk van een element bepaald wordt door zijn unieke naam (id) of door zijn class, daarom heeft W3C hier handige shortcut selectors voor bedacht, die we eigenlijk allemaal al kennen (deze werken namelijk wel overal):

p#intro { font-weight: bold } /* dit is hetzelfde als p[id="intro"] */
p.note{ color: red } /* dit is hetzelfde als p[class~="note"] */

Dus...

In de praktijk “hang” je dus niet een bepaalde stijl aan een element door het class attribuut te specificeren, maar juist andersom. Doordat een element tot een bepaalde class behoort, heeft hij een bepaalde stijl.

Tot slot nog even iets over namen van klassen. Wat ik nogal eens tegenkom zijn mensen die klassen hebben gedefinieerd als “red-box-left” of “green-10pt”. Dergelijke namen geven niet de functie van een klasse weer, maar juist het uiterlijk ervan. Een politieagent noem je ook niet “blauw-uniform-en-een-pet”. Bij een verandering van het uiterlijk van je site (de agent krijgt een groen uniform), snijden dergelijke namen totaal geen hout meer.

Een class is dus een uitbreiding op de naam van een element. Het geeft de (sub)functie aan van dat bepaalde element en naamgeving moet hierop van toepassing zijn. Zie ook: W3C’s tip over klassennamen.

• Home
• Artikelen
• Colofon