Hvis der er to eller flere CSS-regler, der peger på det samme element, vil vælgeren med den højeste specificitetsværdi "vinde", og dens stilerklæring vil blive anvendt på det pågældende HTML-element.
Tænk på specificitet som en score/rang, der bestemmer hvilken stilerklæring anvendes i sidste ende på et element.
Se på følgende eksempler:
I dette eksempel har vi brugt "p"-elementet som vælger og angivet en rød farve for dette element. Teksten bliver rød:
<html>
<head>
<style>
p {color: red;}
</style>
</head>
<body>
<p>Hello World!</p>
</body>
</html>Prøv det selv →
<!DOCTYPE html>
<html>
<head>
<style>
p {color: red;}
</style>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
Se nu på eksempel 2:
I dette eksempel har vi tilføjet en klassevælger (kaldet "test"), og angivet en green farve til denne klasse. Teksten bliver nu grøn (selvom vi har angivet en rød farve for elementvælgeren "p"). Dette skyldes, at klassevælgeren er givet højere prioritet:
<html>
<head>
<style>
.test {color: green;}
p {color: red;}
</style>
</head>
<body>
<p class="test">Hello World!</p>
</body>
</html>Prøv det selv →
<!DOCTYPE html>
<html>
<head>
<style>
.test {color: green;}
p {color: red;}
</style>
</head>
<body>
<p class="test">Hello World!</p>
</body>
</html>
Se nu på eksempel 3:
I dette eksempel har vi tilføjet id-vælgeren (kaldet "demo"). Teksten bliver nu blå, fordi id-vælgeren har højere 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>Prøv det selv →
<!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>
Se nu på eksempel 4:
I dette eksempel har vi tilføjet en inline-stil til "p"-elementet. Det teksten bliver nu lyserød, fordi den indlejrede stil har højeste 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>Prøv det selv →
<!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>
Hver CSS-vælger har sin plads i specificitetshierarkiet.
Der er fire kategorier, som definerer specificitetsniveauet for en vælger:
1. Inline-typografier - Eksempel:
<h1 style="color: pink;">
2. ID'er - Eksempel:
#navbar
3. Klasser, pseudoklasser, attributvælgere - Eksempel:
.test, :hover, [href]
4. Elementer og pseudo-elementer - Eksempel:
h1, ::before
Husk, hvordan man beregner specificitet!
Start ved 0, tilføj 100 for hver id-værdi, tilføj 10 for hver klasseværdi (eller pseudo-klasse eller attributvælger), tilføje 1 for hver elementvælger eller pseudo-element.
Bemærk: Indbygget stil får en specificitetsværdi på 1000 og er altid høj prioritet!
Bemærkning 2: Der er en undtagelse fra denne regel: hvis du bruger !important regel, vil den endda tilsidesætte inline-stile!
Tabellen nedenfor viser nogle eksempler på, hvordan man beregner specificitetsværdier:
| 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ælgeren med den højeste specificitetsværdi vil vinde og træde i kraft!
Overvej disse tre kodefragmenter:
A: h1
B: h1#content
C: <h1 id="content" style="color:
pink;">Heading</h1>Specificiteten af A er 1 (et elementvælger)
specificiteten af B er 101 (én ID-reference + én elementvælger)
Specificiteten af C er 1000 (inline-styling)
Da den tredje regel (C) har den højeste specificitetsværdi (1000), er denne stilart erklæring vil blive anvendt.
Lige specificitet: den seneste regel vinder - Hvis den samme regel er skrevet to gange i det eksterne typografiark, så den seneste regel vinder:
h1 {background-color: yellow;}
h1 {background-color: red;}Prøv det selv →
<!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ælgere har en højere specificitet end attributvælgere - Se på følgende tre kodelinjer:
div#a {background-color: green;}
#a {background-color: yellow;}
div[id=a] {background-color: blue;}Prøv det selv →
<!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ørste regel er mere specifik end de to andre og vil derfor blive anvendt.
Kontekstvælgere er mere specifikke end et enkelt element selector - Det indlejrede typografiark er tættere på det element, der skal styles. Så i følgende situation
From external CSS file:
#content h1 {background-color: red;}
In HTML file:
<style>
#content h1 {background-color:
yellow;}
</style>sidstnævnte regel vil blive anvendt.
En klassevælger slår et vilkårligt antal elementvælgere - en klassevælger som f.eks. .intro-slag h1, p, div osv.:
.intro {background-color: yellow;}
h1 {background-color:
red;}Prøv det selv →
<!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 universelle vælger (*) og nedarvede værdier har en specificitet på 0 - Den universelle vælger (*) og nedarvede værdier ignoreres!