Het class attribuut

Het attribuut class definieert één of meerdere klassen voor een element (met element wordt een tag bedoeld).

Dit wordt gedaan om vervolgens via CSS toegang te krijgen tot een groep elementen waaraan dezelfde klasse is toegekend, en er specifieke eigenschappen op toe te passen (bijvoorbeeld, het wijzigen van de tekstkleur, lettergrootte en zo verder).

Er bestaat ook een id attribuut, dat vergelijkbaar met het attribuut class het mogelijk maakt elementen op een HTML-pagina te selecteren.

Het verschil tussen het attribuut class en het id attribuut is dat class een groep elementen selecteert (zelfs als het aan één element is toegekend - het kan later ook aan een ander worden gegeven), terwijl id een uniek element selecteert (er mag niet meer dan één element met zo'n id op de website-pagina staan, anders ontstaat er een conflict).

Hoe bepaal je wat je een element geeft - een klasse of een id? Een klasse wordt gegeven aan elementen die herhaald worden op de pagina's van de website (om niet meerdere keren dezelfde CSS-code te hoeven schrijven). Zelfs als je op dit moment slechts één zo'n element hebt, maar het gevoel hebt dat vergelijkbare elementen in de toekomst kunnen verschijnen - geef dit element dan een klasse. Als je er daarentegen zeker van bent dat zo'n element uniek is - geef het dan een id. Hoewel er tegenwoordig een tendens is om alle elementen een klasse te geven, en id te bewaren voor JavaScript, is deze niet algemeen aanvaard.

Aan een element kunnen meerdere klassen worden toegekend. In dat geval moeten deze gescheiden door een spatie worden opgesomd.

Klassennamen moeten bestaan uit Engelse letters, cijfers, zonder spaties (een spatie scheidt klassen van elkaar, in plaats daarvan kan een underscore of koppelteken worden gebruikt). Klassen mogen niet beginnen met een cijfer (in HTML5 kan het al, maar het werkt niet in oudere browsers).

Klassen moeten namen krijgen in het Engels (en niet in het Russisch, simpelweg met Engelse letters!). De namen moeten zinvol zijn, en de essentie van de klasse weerspiegelen.

Voorbeeld

Laten we voor alle alinea's met de klasse test een rode tekstkleur instellen:

<p class="test">Alinea met klasse test.</p>
<p>Controle alinea zonder klasse.</p>

.test {
	color: red;
}

Voorbeeld . Meerdere klassen voor een element

Laten we hier aan de eerste alinea meerdere klassen toekennen - test1 en test2 (we schrijven ze gescheiden door een spatie). De klasse test1 stelt de rode tekstkleur in, en de klasse test2 stelt de lettergrootte in op 20px. Aan de tweede alinea is alleen de klasse test1 gegeven (deze alinea wordt rood), en aan de derde alinea - de klasse test2 (deze alinea krijgt een lettergrootte van 20px). De eerste alinea, met twee klassen, krijgt zowel de rode kleur als de lettergrootte van 20px:

<p class="test1 test2">Alinea met twee klassen test1 en test2.</p>
<p class="test1">Alinea met klasse test1.</p>
<p class="test2">Alinea met klasse test2.</p>
<p>Controle alinea zonder klassen.</p>

.test1 {
	color: red;
}
.test2 {
	font-size: 20px;
}

Zie ook

het attribuut id,
dat unieke identificatoren aan elementen toekent