Class-attributten

Attributten class angiver en eller flere klasser for et element (med element menes en tag).

Dette gøres for derefter at kunne tilgå en gruppe elementer, der har den samme klasse, via CSS og anvende bestemte egenskaber for dem (f.eks. skifte tekstfarve, skriftstørrelse osv.).

Der findes også et id-attribut, som ligesom attributten class gør det muligt at vælge elementer på en HTML-side.

Forskellen mellem attributten class og id-attributten er, at class vælger en gruppe elementer (selvom den er givet til ét element - kan den senere gives til et andet), mens id vælger et unikt element (der skal ikke være flere elementer med samme id på siden, ellers opstår der en konflikt).

Hvordan ved man, om man skal give et element en klasse eller et id? En klasse gives til de elementer, der gentages på websitets sider (for ikke at skrive den samme CSS-kode flere gange). Selv hvis du i øjeblikket kun har ét sådant element, men du føler, at lignende elementer kan dukke op senere - så giv dette element en klasse. Hvis du derimod er sikker på, at elementet er unikt - så giv det et id. Selvom der i øjeblikket er en tendens til at give alle elementer en klasse, og reservere id til JavaScript, så er dette ikke en almindelig accepteret praksis.

Man kan give et element flere klasser, i så fald skal de angives adskilt af mellemrum.

Klassenavne skal skrives med engelske bogstaver, tal, uden mellemrum (mellemrum adskiller klasser fra hinanden, i stedet kan man bruge understregning eller bindestreg). Klasser bør ikke starte med et tal (i HTML5 er det tilladt, men det virker ikke i ældre browsere).

Klasser skal navngives på engelsk (og ikke på russisk, blot med engelske bogstaver!). Navnene bør være meningsfulde og afspejle klassens essens.

Eksempel

Lad os give alle afsnit med klassen test en rød tekstfarve:

<p class="test">Afsnit med klassen test.</p>
<p>Kontrolafsnit uden klasse.</p>

.test {
	color: red;
}

Eksempel . Flere klasser for et element

Her giver vi det første afsnit flere klasser - test1 og test2 (angivet adskilt af mellemrum). Klassen test1 giver rød tekstfarve, mens klassen test2 giver skriftstørrelsen 20px. Det andet afsnit får kun klassen test1 (dette afsnit bliver rødt), og det tredje afsnit - klassen test2 (dette afsnit får en skriftstørrelse på 20px). Det første afsnit, som har to klasser, vil have både rød farve og en skriftstørrelse på 20px:

<p class="test1 test2">Afsnit med to klasser test1 og test2.</p>
<p class="test1">Afsnit med klassen test1.</p>
<p class="test2">Afsnit med klassen test2.</p>
<p>Kontrolafsnit uden klasser.</p>

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

Se også

attributten id,
som angiver unikke identifikatorer for elementer