Attributtet class

Attributtet class setter en eller flere klasser for et element (med element menes her en tag).

Dette gjøres for å deretter kunne vise til en gruppe elementer som har samme klasse, via CSS, og bruke spesifikke egenskaper på dem (for eksempel endre tekstfarge, skriftstørrelse og så videre).

Det finnes også et id-attributt, som ligner på attributtet class og lar deg velge elementer på en HTML-side.

Forskjellen mellom attributtet class og id-attributtet er at class velger en gruppe elementer (selv om det er gitt til ett element - kan det senere gis til et annet), mens id velger et unikt element (det skal ikke være flere elementer med samme id på netsiden, ellers oppstår det en konflikt).

Hvordan vet man om man skal gi et element en klasse eller en id? Klasse gis til de elementene som gjentas på netsidene (for ikke å måtte skrive samme CSS-kode flere ganger). Selv om du for øyeblikket kun har ett slikt element, men føler at lignende elementer kan dukke opp senere - gi dette elementet en klasse. Hvis du derimot er sikker på at elementet er unikt - gi det en id. Selv om det i dag er en tendens til å gi alle elementer en klasse, og reservere id for JavaScript, så er dette ikke en allment akseptert praksis.

Et element kan ha flere klasser. I så fall skal de oppgis atskilt med mellomrom.

Klassenavn skal skrives med engelske bokstaver, tall, uten mellomrom (mellomrom skiller klasser fra hverandre, i stedet kan man bruke understrek eller bindestrek). Klasser bør ikke starte med tall (i HTML5 er det tillatt, men det vil ikke fungere i eldre nettlesere).

Klasseinavn bør være på engelsk (ikke på russisk, bare med engelske bokstaver!). Navnene bør være meningsfulle og gjenspeile klassens funksjon.

Eksempel

La oss gi alle avsnitt med klassen test rød tekstfarge:

<p class="test">Et avsnitt med klassen test.</p>
<p>Et kontrollavsnitt uten klasse.</p>

.test {
	color: red;
}

Eksempel . Flere klasser for et element

Her gir vi det første avsnittet flere klasser - test1 og test2 (skrevet atskilt med mellomrom). Klassen test1 gir rød tekstfarge, mens klassen test2 gir skriftstørrelse på 20px. Det andre avsnittet har kun klassen test1 (dette avsnittet blir rødt), og det tredje avsnittet - klassen test2 (dette avsnittet vil ha skriftstørrelse på 20px). Det første avsnittet, som har to klasser, vil både ha rød farge og skriftstørrelse på 20px:

<p class="test1 test2">Avsnitt med to klasser test1 og test2.</p>
<p class="test1">Avsnitt med klassen test1.</p>
<p class="test2">Avsnitt med klassen test2.</p>
<p>Kontrollavsnitt uten klasser.</p>

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

Se også

attributtet id,
som setter unike identifikatorer for elementer