Turordningsregler för CSS

I många fall kommer flera olika CSS-regler att matcha ett och samma element. Då kan det hända att dessa regler anger olika värden för samma egenskap, t.ex. kanske flera olika regler sätter bakgrundsfärgen. För att kunna hantera sådana situationer på ett förutsägbart sätt, så har CSS ett regelverk som anger vilken turordning som gäller för olika selektorer.

Att sätta samma egenskap i en regel

Det enklaste fallet där samma egenskap ändras flera gånger är om egenskapen förekommer flertalet gånger i samma regel. Låt säga att vi har följande kod:

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

Här skulle slutfä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 med ett och samma CSS-kommando.

Att sätta samma egenskap i flera regler

Ett annat fall där samma egenskap kan förändras flera gånger är när vi har två (eller flera) regler som matchar samma element. Vad skulle hända om vi hade följande kod?

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

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 vi satt så att ett av våra 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. Det fungerar 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 kan matcha ett enda element (ett id får ju enbart förekomma en gång i ett webbdokument). 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.

Matchning av samma element, olika egenskaper

Låt oss titta på ett annat fall där flera regler matchar 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!). Samtidigt anger vi att det element som har id:n ”idnamn” ska ha blå förgrund. Hur kommer webbläsaren att tolka detta? Vilket av de båda möjliga värdena kommer att vinna?

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 ett element (i stigande viktordning), genomför webbläsaren de egenskaps-förändringar som anges. För varje regel som gås igenom sätts de egenskaper som anges i regeln, eventuellt skriver webbläsaren över de förändringar som andra regler angett. Sånt som förändrats i tidigare regler, men som inte finns med i efterföljande regler lämnas som det var.

Samma selektor flera gånger

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-tolken fortsätter jobba så skrivs färgvalet över med gult. Detta gör alltså att det kan spela roll i vilken ordning olika CSS-regler anges.

Skapar flexibilitet

Det sätt på vilket CSS hanterar fallet när 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 genom att skapa regler som matchar alla, eller många element. Därefter kan vi ange mer specifika regler som ändrar de egenskaper som enbart ska gälla för vissa element. Detta är bra, inte minst för att vi kan få mycket kortare CSS-filer.

Nästa aktivitet

Kombinationer av selektorer