Jag bloggar numera på http://blog.dileno.com ».

Klasser och ID-selektorer

en CSS-artikel av Martin S., publicerad den 2 maj 2005
Ibland kan det bli en begränsning att definiera hur HTML-element såsom h1-h6, input, textarea och hr ska se ut. Du kanske känner att en rubrik på sidan inte ska se ut som alla andra rubriker. Du vill frångå de egenskaperna du gett rubriken från början, men vet inte hur du ska göra för att ge andra rubriker andra egenskaper. Lösningen finns, och den stavas klass- och ID-selektorer.

Uppbyggnad av regler i CSS


En stilmall kan definiera hur HTML-element ser ut. Vill vi att elementen h2 och h3 som används för rubriker ska ha en viss bakgrund och ett visst teckensnitt så skriver vi en regel för det. En sådan regel kan se ut så här:

h2, h3 {
background-color: #999;
color: #000;

font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 16px; }

Regeln för h2 och h3 säger att rubrikerna nu får bakgrundsfärgen #999 (grå) och textfärgen #000 (svart). Teckensnittet som ska användas i första hand är Verdana. Sedan Arial, Helvetica och närmsta serif-teckensnittet. Storleken på texten är 16 pixlar.

Låt säga att du vill ha en annan regel för h2. Att bakgrundsfärgen ska vara transparent (det är den som default) och textfärgen ska vara vinröd och storleken på texten ska vara 18 pixlar i stället för 16. Då får du skriva en enskild regel för h2:

h2 {
color: #800000;
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 18px; }

En regels struktur ser ut så här:

h2 { color: #000; font-size: 18px; }

h2 är ett HTML-element (andra HTML-element är exempelvis input, hr och img) som i CSS-regeln kallas för selektor. Det som omfattar klamrarna { och } och det som är innanför kallas för deklarationsblock. I deklarationsblocket skriver du egenskaperna och egenskapernas värde för selektorn. Egenskaperna nedan är color och font-size. Värdena är #000 och 18px.

Att använda Class


Om du exempelvis använder dig av HTML-elementet h3 på flera ställen på din sajt, så kanske du inte alltid vill att rubrikerna ska vara likadana vad gäller färg, storlek etc. Det är då class-selektorn kommer in i bilden. Låt oss säga att du på ett ställe på din sida vill att ditt h3-element ska ha just de egenskaperna du sagt åt den att ha i CSS-regeln. På ett annat ställe på sajten vill du använda dig av h3-elementet igen, men där ska rubriken ha en annan färg och storlek. Då kan du skriva en regel för hur h3-elementet generellt sett ska se ut, och en regel för hur det ska se ut annars.

h3 {
color: #800000;
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 16px; }

.subrubrik {
color: #333;
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 14px; }

Vi har talat om hur vi vill att h3 ska se ut ifall om vi bara skriver <h3>Rubriktext</h3> på sedan. Sedan har vi skapat en klass som heter subrubrik. Klassen subrubrik har en annan färg och storlek på texten. Som du ser skriver du en punkt (.) före klassens namn, för att tala om att det är en klass. Skulle du glömma att skriva punkten före så skulle klassen inte fungera som tänkt. Vill du använda klassen på din sida skriver du sedan så här:

<h3 class=”subrubrik”>Här skriver du en underrubrik</h3>
Du ger HTML-elementet h3 ett attribut, class, och ger klassen ett värde, subrubrik. Detta talar om för webbläsaren att här har vi en rubrik som ska få sin stil från selektorn subrubrik. Till skillnad från en vanlig h3-rubrik visas nu h3 class=”subrubrik” med en annan stil.

Självklart kan du lägga till klasser som du vill – bara du använder dig av rätt syntax. Ett annat exempel på klasser är multipla klasser. Med hjälp av multipla klasser kan du på ett ställe använda klassen X, och på ett annat ställe klassen Y. Helt plötsligt vill du använda båda klasserna tillsammans – och det fungerar alldeles utmärkt tack vare att klasser kan vara multipla.

Vi säger att vi vill ha två klasser, klass X som gör text fet, och klass Y som stryker under text. Så här ser de ut:

.X { font-weight: bold; }
.Y { text-decoration: underline; }

Vill du att en text ska vara fet kan du använda HTML-elementet span och klassen X. Vill du att en annan text ska vara understruten kan du använda span igen, fast klassen Y i stället. Så här:

<span class=”X”>Denna text är fet.</span>
<span class=”Y”>Denna text är understruken.</span>

Så långt så fint. Men nu vill du att en text ska vara både fet och understruken. Då kan du skapa en tredje klass med de reglerna. Eller så använder du dig av multipla klasser, så här:

<span class=”X Y”>Denna text är både fet och understruken.</span>
Du skriver båda klassernas namn i attributet class, men med ett mellanrum. Vill du så kan du använda fler klasser – glöm inte att ha ett mellanrum mellan klassnamnen då.

Att använda ID


ID-selektorer är på många sätt och vis lika class-selektorer. Dock finns det några undantag. Man skriver en fyrkant (#) i stället för en punkt när man ska skapa en regel. Samma regel för subrubrik-klassen (se tidigare exempel under rubriken ”Att använda class”) kan se ut så här:

#subrubrik {
color: #333;
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 14px; }

När du vill använda dig av ID-selektorn, så finns det ett undantag till: du ska använda id-attributet i stället för class-attributet i HTML-elementet. Så här:

<h3 id=”subrubrik”>Detta är en underrubrik</h3>
En skillnad till jämfört med klasser, är att ID-selektorer inte kan vara multipla. Du kan bara använda en selektor åt gången.

När ska man använda vad?


Det finns en poäng med att det finns klasser och ID-selektorer. En och samma ID-selektor ska bara användas en gång på samma sida. Har du alltså redan ett element med ID-värdet subrubrik, så får inget annat element på samma sida ha samma ID-värde. Klasser däremot kan användas flera gånger på samma sida. Vet du på förhand att en regel du skrivit bara ska användas en gång på en sida – då är det alltså ID du ska välja. Kommer regeln att användas flera gånger på samma sida – då är det en klass du ska använda dig av.

Klasser och ID-selektorer underlättar avsevärt när man jobbar med mer avancerad CSS. Dock bör du vara säker på att du verkligen behöver använda dessa innan du gör det. När du väl vant dig så ska du se att arbetet med CSS-design flyter på bättre än tidigare.