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”>

.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”>

Du kan också vara mer specifik:

p.klass1 {font-family:helvetica, arial, 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”>

#id1 {color:#0000ff}

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.

Kombinerade väljare i CSS

Hittills har ni ju arbetat med tre typer av väljare i era CSS:er:

Vanliga väljare, typväljare

När du helt enkelt använder ett HTML-element som väljare, till exempel p{color:red;}

Klasser som väljare

När du använder ett klassnamn som väljare, med en punkt före, till exempel .minklass{color:green;}

ID som väljare

När du använder ett unikt ID som väljare, med ett nummertecken (#) före, till exempel #mittid{color:blue;}

Varianterna ovan kan också kombineras på olika sätt för att uppnå en mer noggrann kontroll. Du kan ange regler som ska gälla för alla p som är barn till .minklass eller någonting annat.

De vanligaste varianterna är:

element element

två väljare efter varandra innebär att regeln gäller för alla av det senare elementet som ingår i det första. Exempel: div p {color: red;} innebär att regeln gäller för alla <p> som ingår i en <div>

element, element

Två väljare med ett komma mellan innebär att regeln gäller för båda elementen, oberoende av deras inbördes förhållande. Exempel: h2, p {color: green;} innebär att alla <h2> och <p> blir röda, oavsett deras inbördes förhållande. Praktiskt när man vill korta ned sin kod.

element > element

Ett större-än-tecken mellan väljarna innebär att regeln gäller för den sista väljaren om denna är barn till den föregående. Exempel: div>p {color: blue;} betyder att alla <p> som är barn till en <div> blir blå.

Du kan kombinera dessa med ., # och annat. Du kan också haka på många olika väljare i en kedja. ul>li>.klassnamn innebär alltså alla element med klassnamnet klassnamn, som är barn till en <li>, som är barn till en <ul>.

De ovan nämnda är de absolut vanligaste, men det finns flera andra varianter som kan förekomma. Du kan till exempel göra en väljare som utgår från ett attribut som väljare snarare än ett element. Du kan använda ett värde som väljare och olika kombinationer av dessa.

Du kan läsa mer om detta hos W3c, Mozilla och W3Schools.