Attributet class

Attributet class sätter en eller flera klasser för ett element (med element menas en tagg).

Detta görs för att sedan kunna komma åt en grupp element som har samma klass tilldelad via CSS och applicera specifika egenskaper på dem (till exempel, ändra textfärg, teckenstorlek och så vidare).

Det finns också ett attribut id, som liknar attributet class och möjliggör att välja element på en HTML-sida.

Skillnaden mellan attributet class och attributet id är att class väljer en grupp element (även om den tilldelas ett element - kan den senare ges till ett annat), medan id väljer ett unikt element (det bör inte finnas fler element med samma id på webbplatsens sida, annars uppstår en konflikt).

Hur vet man om man ska ge ett element en klass eller ett id? En klass ges till de element som upprepas på webbplatsens sidor (för att undvika att skriva samma CSS-kod flera gånger). Även om du för närvarande bara har ett sådant element, men känner att liknande element kan dyka upp i framtiden - ge då detta element en klass. Om du däremot är säker på att ett sådant element är unikt - ge det då ett id. Även om det för närvarande finns en tendens att ge alla element en klass och lämna id för JavaScript, så är den inte allmänt accepterad.

Ett element kan tilldelas flera klasser, i så fall ska de listas separerade med mellanslag.

Klassnamn ska skrivas med engelska bokstäver, siffror, utan mellanslag (mellanslag separerar klasser från varandra, istället kan man använda understreck eller bindestreck). Klasser bör inte börja med en siffra (i HTML5 går det redan, men fungerar inte i äldre webbläsare).

Klassnamn ska ges på engelska (svenska, inte ryska, bara med engelska bokstäver!). Namnen ska vara meningsfulla och återspegla klassens kärna.

Exempel

Låt oss ge all text med klassen test en röd textfärg:

<p class="test">Ett stycke med klassen test.</p>
<p>Ett stycke utan klass.</p>

.test {
	color: red;
}

Exempel . Flera klasser för ett element

Och här ger vi det första stycket flera klasser - test1 och test2 (vi skriver dem separerade med mellanslag). Klass test1 sätter röd textfärg, och klass test2 sätter teckenstorlek till 20px. Det andra stycket har bara klassen test1 (detta stycke blir rött), och det tredje stycket - klassen test2 (detta stycke kommer att ha teckenstorlek 20px). Det första stycket, som har två klasser, kommer att ha både röd färg och teckenstorlek på 20px:

<p class="test1 test2">Ett stycke med två klasser test1 och test2.</p>
<p class="test1">Ett stycke med klassen test1.</p>
<p class="test2">Ett stycke med klassen test2.</p>
<p>Ett stycke utan klasser.</p>

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

Se även

attributet id,
som sätter unika identifierare för element