Turordningsregler för CSS

CSS har ett regelverk för hur i vilken ordning olika selektorer påverkar element.

Exempel

Vad skulle hända om vi hade följande CSS-kod:

See the Pen GJQgKm by Patrik Grip-Jansson (@PGJ) on CodePen.

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, när 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 på 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.

Specificitet

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.

See the Pen PqQwoK by Patrik Grip-Jansson (@PGJ) on CodePen.

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:

See the Pen zGRxYV by Patrik Grip-Jansson (@PGJ) on CodePen.

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.

Ett andra exempel:

See the Pen gpvbbR by Patrik Grip-Jansson (@PGJ) on CodePen.

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. I vissa fall kan olika CSS-egenskaper förändra samma sak, trots att de heter olika. Detta gäller inte minst de sammansatta, kortegenskaperna där man kan ange flera egenskaper i ett och samma CSS-kommando.

Skapar flexibilitet

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 med vissa regler 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.

Nästa aktivitet

Kombinationer av selektorer