CSS skola
CSS kaskadordning

CSS kaskadordning

Kaskad (eller cascade på engelskan) innebär att CSS-egenskaper kan definieras flera gånger för samma element. Ibland kan olika CSS-regler säger emot varandra. För att lösa detta finns det en detaljerad rangordning som anger i vilken ordning olika regler ska gälla. Denna ordning kallas "kaskadordning" (jmf. cascading style sheet).

Kaskadordning

Alla stilmallar för en webbsidan läggs samman av webbläsaren till en ny gemensam stilmall efter följande prioriteringsordning där ett har högst prioritet:

  1. CSS som angets inuti ett HTML element
  2. Interna stilmallar
  3. Externa stilmallar
  4. Webbläsarens standardinställning.

Observera att hänvisningar till ett externa CSS-dokument som placeras nedanför intern CSS i ett dokuments sidhuvud gäller före de interna CSS egenskaperna.

Om man tänker att webbläsaren läser in ett HTML-dokument uppifrån och ned så är det alltså den regel som läses in sist (dvs. står längre ner på sidan) som gäller före de regler som läses in före.

HTML:

<p class="foo" id="bar">Här står lite <span>text</span>!!</p>

CSS:

p {color:blue}
p {color:red}

I ovanstående exempel kommer paragrafer att visas med röd textfärg.

Väljare avgör

Vilken CSS-regel som gäller före en annan beror även på vilken väljare som regeln angetts med där

3. har högst prioritet:

  1. element
  2. .class
  3. #id

HTML:

<p class="foo" id="bar">Här står lite text</p>

CSS:

p {color:blue; font-size:12px; font-weight:lighter;}
.foo {color:red; font-weight:bold;}
#bar {color:green}

I ovanstående exempel ärver texten färgen grön från identiteten #bar, fontens tjocklek från klassen .foo och font-storleken från elementtypen p.

Specifika regler går före

Hur specifik en regel är avgör också prioriteringsordning.

CSS:

span {color:red}
p span {color:blue}

I ovanstående exempel får elementet span <span> färgen blå.

Viktning för väljare

När regler från olika stilmallar jämförs så jämförs vikten av väljarna. W3C har skapat en tabell över hur väljare ska prioriteras internt.

  • Varje element räknas som 1.
  • Ett .class attribut räknas som 10.
  • Ett #id attribut räknas som 100.

Nedan följer några exempel:

Väljare Antal #id Antal class Antal element Total vikt
li 0 0 1 1
ul li 0 0 2 2
ul ol li 0 0 3 3
li.foo 0 1 1 11
ul ol li.foo 0 1 3 13
#bar 1 0 0 100

Observera att CSS-regler som anges direkt i ett HTML attribut dvs. inline style får samma vikt som #id.

!important

!important är ett sätt att slippa allt räknande av vikter. Genom att skriva " !important" efter en förklaring så kommer den förklaringen att automatiskt få högst prioritet.

CSS:

span { color: red !important; }
p span { color: blue; }

Även om regeln "p span" har högre viktning så blir textfärgen på elementet <span> röd!

Observera att om !important angetts mer än en gång för ett och samma element så gäller den vanliga kaskadordningen.

Om man använder !important för en samlingsegenskap så räknas det som om alla ingående egenskaper också skrivits med !important.

Observera att Internet Explorer 6 och tidigare versioner inte stödjer !important.

| Mer