CSS-specificitet


Innehållsförteckning

    Visa innehållsförteckning


Vad är specificitet?

Om det finns två eller flera CSS-regler som pekar på detsamma element, kommer väljaren med det högsta specificitetsvärdet att "vinna", och dess stildeklaration kommer att tillämpas på det HTML-elementet.

Tänk på specificitet som en poäng/ranking som avgör vilken stildeklaration appliceras slutligen på ett element.

Titta på följande exempel:

Exempel 1

I det här exemplet har vi använt elementet "p" som väljare och angett en röd färg för detta element. Texten blir röd:

 <html>
<head>
  <style>
    p {color: red;} 
  
  </style>
</head>
<body>
<p>Hello World!</p>
  
</body>
  </html>

Prova själv →

<!DOCTYPE html>
<html>
<head>
<style>
p {color: red;} 
</style>
</head>
<body>

<p>Hello World!</p>

</body>
</html>


Titta nu på exempel 2:

Exempel 2

I det här exemplet har vi lagt till en klassväljare (som kallas "test"), och angav en green färg för denna klass. Texten blir nu grön (även om vi har angett en röd färg för elementväljaren "p"). Detta beror på att klassväljaren är given högre prioritet:

 <html>
<head>
  <style>
    .test {color: green;}
  
    p {color: red;} 
  </style>
</head>
<body>
  
<p class="test">Hello World!</p>
</body>
</html>

Prova själv →

<!DOCTYPE html>
<html>
<head>
<style>
.test {color: green;} 
p {color: red;} 
</style>
</head>
<body>

<p class="test">Hello World!</p>

</body>
</html>


Titta nu på exempel 3:

Exempel 3

I det här exemplet har vi lagt till id-väljaren (som heter "demo"). Texten blir nu blå, eftersom id-väljaren ges högre prioritet:

 <html>
<head>
  <style>
    #demo {color: blue;}
    
  .test {color: green;} 
    p {color: red;} 
  
  </style>
</head>
<body>
<p id="demo" class="test">Hello 
  World!</p>
</body>
</html>

Prova själv →

<!DOCTYPE html>
<html>
<head>
<style>
#demo {color: blue;}
.test {color: green;} 
p {color: red;} 
</style>
</head>
<body>

<p id="demo" class="test">Hello World!</p>

</body>
</html>


Titta nu på exempel 4:

Exempel 4

I det här exemplet har vi lagt till en inline-stil för "p"-elementet. De texten kommer nu att vara rosa, eftersom den infogade stilen ges högsta prioritet:

 <html>
<head>
  <style>
    #demo {color: blue;}
    
  .test {color: green;} 
    p {color: red;} 
  
  </style>
</head>
<body>
<p id="demo" class="test" 
  style="color: pink;">Hello World!</p>
</body>
</html>

Prova själv →

<!DOCTYPE html>
<html>
<head>
<style>
#demo {color: blue;}
.test {color: green;} 
p {color: red;} 
</style>
</head>
<body>

<p id="demo" class="test" style="color: pink;">Hello World!</p>

</body>
</html>



Specificitetshierarki

Varje CSS-väljare har sin plats i specificitetshierarkin.

Det finns fyra kategorier som definierar specificitetsnivån för en väljare:

1. Inbäddade stilar - Exempel:

<h1 style="color: pink;">

2. ID - Exempel:

#navbar

3. Klasser, pseudoklasser, attributväljare - Exempel:

.test, :hover, [href]

4. Element och pseudo-element - Exempel:

h1, ::before

Hur beräknar man specificitet?

Memorera hur man beräknar specificitet!

Börja vid 0, lägg till 100 för varje ID-värde, lägg till 10 för varje klassvärde (eller pseudoklass- eller attributväljare), lägg till 1 för varje elementväljare eller pseudo-element.

Obs! Inline stil får ett specificitetsvärde på 1000 och är alltid högsta prioritet!

Obs 2: Det finns en undantag från denna regel: om du använder !important regel, det kommer till och med att åsidosätta inline-stilar!

Tabellen nedan visar några exempel på hur man beräknar specificitetsvärden:

Selector Specificity Value Calculation
p 1 1
p.test 11 1 + 10
p#demo 101 1 + 100
<p style="color: pink;"> 1000 1000
#demo 100 100
.test 10 10
p.test1.test2 21 1 + 10 + 10
#navbar p#demo 201 100 + 1 + 100
* 0 0 (the universal selector is ignored)

Väljaren med det högsta specificitetsvärdet vinner och träder i kraft!

Tänk på dessa tre kodfragment:

Exempel

A: h1
B: h1#content
C: <h1 id="content" style="color: 
  pink;">Heading</h1>

Specificiteten för A är 1 (ett elementväljare)
Specificiteten för B är 101 (en ID-referens + en elementväljare)
Specificiteten för C är 1000 (inline-styling)

Eftersom den tredje regeln (C) har det högsta specificitetsvärdet (1000), är denna stil deklarationen kommer att tillämpas.



Fler specificitetsregler Exempel

Lika specificitet: den senaste regeln vinner - Om samma regel skrivs två gånger i den externa stilmallen, då den senaste regeln vinner:

Exempel

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

Prova själv →

<!DOCTYPE html>
<html>
<head>
<style>
h1 {background-color: yellow;}
h1 {background-color: red;}
</style>
</head>
<body>

<h1>This is heading 1</h1>

</body>
</html>



ID-väljare har en högre specificitet än attributväljare - Titta på följande tre kodrader:

Exempel

div#a {background-color: green;}
#a {background-color: yellow;}
div[id=a] {background-color: blue;}

Prova själv →

<!DOCTYPE html>
<html>
<head>
<style>
div#a {background-color: green;}
#a {background-color: yellow;}
div[id=a] {background-color: blue;}
</style>
</head>
<body>

<div id="a">This is a div</div>

</body>
</html>


den första regeln är mer specifik än de andra två och kommer därför att tillämpas.


Kontextväljare är mer specifika än ett enskilt element väljare - Den inbäddade formatmallen är närmare det element som ska formateras. Så i följande situation

Exempel

From external CSS file:
#content h1 {background-color: red;}

In HTML file:
<style>
#content h1 {background-color: 
yellow;}
</style>

den senare regeln kommer att tillämpas.


En klassväljare slår valfritt antal elementväljare - en klassväljare som .intro slår h1, p, div, etc:

Exempel

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

Prova själv →

<!DOCTYPE html>
<html>
<head>
<style>
.intro {background-color: yellow;}
h1 {background-color: red;}
</style>
</head>
<body>

<h1 class="intro">This is a heading</h1>

</body>
</html>



Den universella väljaren (*) och ärvda värden har en specificitet på 0 - Den universella väljaren (*) och ärvda värden ignoreras!