Introduktion till id och klasser

För att på ett bättre sätt kunna styra exakt vilka HTML-element man vill adressera med sina CSS-regler, brukar man använda sig av id och klasser. Dessa kan även användas för att adressera element ifrån JavaScript. I fallet med id, så kan det även användas för att adressera fragment i webbsidor.

id

Om man vill adressera ett enda, specifikt html-element i en CSS-regel, kan man använda sig av id-selektorn. Vi har redan tidigare sett hur man kan använda det globala attributet ”id” för att ange ett specifikt id för ett HTML-element. Dessa id går även att använda i CSS-regler. För att skapa en selektor som väljer ut ett specifikt id, gör man så här:

#idnamn {
  color: blue;
}

Ovanstående skulle välja ut det HTML-element som har id:t ”idnamn” och sätta dess förgrundsfärg till blå. På så vis kan man styra specifikt utseende på enskilda, utvalda element.

Vad skulle då hända om vi hade följande kod:

h1 {
  color: red;
}

#idnamn {
  color: blue;
}

Här har vi alltså två CSS-regler. En som säger att alla h1-element ska ha röd färg och en som säger att det elementet som har id satt till ”idnamn” ska ha blå färg. Vad händer nu om jag satt så att ett av mina h1-element har just den id:n? Jo, det finns ett regelverk som anger hur mycket vikt man ska lägga till olika selektorer och den tyngst vägande selektorn trumfar över de lättviktigare selektorerna. Ungefär som i matematiken där t.ex. multiplikation sker före addition. I CSS kan man generellt säga att desto specifikare en selektor är, desto högre vikt har den. En id-selektor är ju jättespecifik, då den enbart väljer ut ett enda element. Därmed har den högst vikt och det är den som ”vinner” i detta fall. Det h1-element som har id:t ”idnamn” kommer alltså att få blå textfärg.

Men vad händer om vi har följande CSS-kod?

h1 {
  color: red;
  background-color: yellow;
}

#idnamn {
  color: blue;
}

Här inför vi en ny CSS-egenskap som gör att vi kan sätta bakgrundsfärgen på ett element. Koden ovan anger att alla h1-element ska ha gul bakgrund och röd förgrund (ja, verkligen hemska färgval!), medan det element som har id:n ”idnamn” ska ha blå förgrund. Vad händer nu? Vi har redan konstaterat att id-selektorn väger tyngre än element-selektorn och att den vinner vad gäller ”color”. Men vad händer med ”background-color”? Jo, alla h1-element kommer att få gul bakgrund, även det vars id matchar den andra regeln. Allteftersom reglerna matchar (i stigande viktordning), bygger man på med alla de möjliga egenskaps-förändringar som ett element kan få. I det fall man kommer till en regel som väger tyngre än de tidigare skriver man över de egenskaper som den regeln sätter, men man behåller allt som satts, men inte angivits i denna regel.

I de fall som selektorerna har samma vikt, blir det den som påträffas sist som vinner. Ett par exempel på detta:

h1 {
  color: blue;
}

h1 {
 color: yellow;
}

Detta skulle resultera i att h1-elementen skulle ha gul text. Först sätts de till blå, sedan när CSS-parsern fortsätter tolka så skrivs färgvalet över med gult.

h1 {
  color: blue;
  color: yellow;
}

Precis som i förra exemplet skulle färgen bli gul, för om man sätter samma egenskap flera gånger i en och samma regel, så vinner den sista förekomsten av egenskapen.

Det sätt på vilket CSS hanterar flera regler som påverkar ett och samma element gör att vi kan vara mycket flexibla i vårt regelskrivande. Vi kan ange sådant som är generellt för alla element av en typ i en regel som matchar alla, eller många element och därefter, i andra regler, ändra de egenskaper som enbart ska gälla för vissa, specifika element. Detta är bra, inte minst för att vi kan få mycket kortare CSS-filer.