Turordningsregler för CSS
Vad skulle hända om vi hade följande CSS-kod:
och följande HTML-kod:
<h1 id="idnamn">Rubriken</h1>
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 prioriteringsreglerna 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.
Låt oss titta på ett annat fall där flera regler blir att gälla för samma element.
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. Hur kommer webbläsaren att tolka detta? 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:
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. Detta gör alltså att det kan spela roll i vilken ordning olika CSS-filer läses in.
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.