CSS

Attributen class och id

Två vanliga HTML-attribut är class och id. Oftast används de för deras förmåga att fungera som väljare i CSS. Värdet till class eller id är ett namn som själv väljer. På så sätt kan du skapa egna väljare till din CSS.

Klasser, attributet class

Du kan till exempel skapa en klass med klassnamnet klass1 till vilken du kan skapa en CSS-regel som gör all text med den klassen grön.

<div class=”klass1”>
i HTML motsvaras då i CSS av
.klass1 {color:#00ff00}

Punkten innan klass1 i ditt CSS talar om att det är fråga om en klass, attributet class

Du kan dessutom använda din klass i andra taggar än <div>

<p class=”klass1”>
kommer att ge egenskaperna hos klassen klass1 till detta <p>.

Du kan också vara mer specifik:

p.klass1 {font-family:helvetica, arial, sans-serif}
Kommer att ge alla <p>, som också har attributet class=”klass1” ett linjärt typsnitt (sans-serif).

ID, attributet id

Id står för identitet. Attributet används på samma sätt som class. Skillnaden är att ett id står för en unik identitet för en tagg. En klass kan du ju använda på flera platser i ditt dokument, men du skall bara ett av varje id per dokument.

I CSS märker du ut att det är fråga om ett id med hjälp av nummersymbolen (#) på samma sätt som du när det är frågan om en klass använder en vanlig punkt (.).

<div id=”id1”>
motsvaras i CSS av
#id1 {color:#0000ff}
som i det här fallet gör id1 blå.

När ska man välja class eller id?

I de absolut flesta fallen är class det bästa alternativet för att göra CSS-regler. Du vill ju slippa skriva samma kod flera gånger, använder du en klass i stället för ett id kan du återanvända det klassnamnet hur många gånger du vill på den sajten. Id:n är ju unika.

Däremot är id alldeles utmärkt vid många andra tillfällen, som namngivna ankare och annat som inte har med CSS att göra.

Kortversion: Använd class för CSS om du inte har särskilda skäl till att använda id.