CSS- specificiteit
Wat is specificiteit?
Als er twee of meer CSS-regels zijn die naar hetzelfde element verwijzen, "wint" de selector met de hoogste specificiteitswaarde en wordt de stijldeclaratie toegepast op dat HTML-element.
Zie specificiteit als een score/rang die bepaalt welke stijlverklaring uiteindelijk op een element wordt toegepast.
Kijk naar de volgende voorbeelden:
voorbeeld 1
In dit voorbeeld hebben we het "p"-element als selector gebruikt en een rode kleur gespecificeerd voor dit element. De tekst wordt rood:
<html>
<head>
<style>
p {color: red;}
</style>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
Kijk nu naar voorbeeld 2:
Voorbeeld 2
In dit voorbeeld hebben we een klassekiezer toegevoegd (genaamd "test") en een groene kleur gespecificeerd voor deze klasse. De tekst zal nu groen zijn (ook al hebben we een rode kleur gespecificeerd voor de elementselector "p". Dit komt omdat de class selector een hogere prioriteit krijgt:
<html>
<head>
<style>
.test {color: green;}
p {color: red;}
</style>
</head>
<body>
<p class="test">Hello World!</p>
</body>
</html>
Kijk nu naar voorbeeld 3:
Voorbeeld 3
In dit voorbeeld hebben we de id-selector toegevoegd (genaamd "demo"). De tekst is nu blauw, omdat de id selector een hogere prioriteit krijgt:
<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>
Kijk nu naar voorbeeld 4:
Voorbeeld 4
In dit voorbeeld hebben we een inline-stijl toegevoegd voor het "p"-element. De tekst wordt nu roze, omdat de inline-stijl de hoogste prioriteit krijgt:
<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>
Specificiteit Hiërarchie
Elke CSS-selector heeft zijn plaats in de specificiteitshiërarchie.
Er zijn vier categorieën die het specificiteitsniveau van een selector bepalen:
- Inline stijlen - Voorbeeld: <h1 style="color: pink;">
- ID's - Voorbeeld: #navbar
- Klassen, pseudo-klassen, kenmerkselectors - Voorbeeld: .test, :hover, [href]
- Elementen en pseudo-elementen - Voorbeeld: h1, :before
Hoe specificiteit berekenen?
Onthoud hoe u specificiteit kunt berekenen!
Begin bij 0, voeg 100 toe voor elke ID-waarde, voeg 10 toe voor elke klassewaarde (of pseudo-klasse of attribuutkiezer), voeg 1 toe voor elke elementkiezer of pseudo-element.
Opmerking: Inline-stijl krijgt een specificiteitswaarde van 1000 en krijgt altijd de hoogste prioriteit!
Opmerking 2: Er is één uitzondering op deze regel: als u de !important
regel gebruikt, overschrijft deze zelfs inline-stijlen!
De onderstaande tabel toont enkele voorbeelden voor het berekenen van specificiteitswaarden:
| 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) |
De selector met de hoogste specificiteitswaarde wint en wordt van kracht!
Beschouw deze drie codefragmenten:
Voorbeeld
A: h1
B: h1#content
C: <h1 id="content" style="color:
pink;">Heading</h1>
De specificiteit van A is 1 (één element selector)
De specificiteit van B is 101 (één ID-referentie + één element selector)
De specificiteit van C is 1000 (inline styling)
Aangezien de derde regel (C) de hoogste specificiteitswaarde heeft (1000), wordt deze stijlverklaring toegepast.
Meer specifieke voorbeelden van regels
Gelijke specificiteit: de laatste regel wint - Als dezelfde regel twee keer in de externe stylesheet wordt geschreven, wint de laatste regel:
Voorbeeld
h1 {background-color: yellow;}
h1 {background-color: red;}
ID-selectors hebben een hogere specificiteit dan attribuutselectors - Kijk naar de volgende drie coderegels:
Voorbeeld
div#a {background-color: green;}
#a {background-color: yellow;}
div[id=a] {background-color: blue;}
de eerste regel is specifieker dan de andere twee en zal daarom worden toegepast.
Contextuele selectors zijn specifieker dan een enkel element selector - Het ingesloten stylesheet is dichter bij het element dat gestyled moet worden. Dus in de volgende situatie:
Voorbeeld
From external CSS file:
#content h1 {background-color: red;}
In HTML file:
<style>
#content h1 {background-color:
yellow;}
</style>
de laatste regel zal worden toegepast.
Een klassenkiezer verslaat een willekeurig aantal elementkiezers - een klassenkiezer zoals .intro verslaat h1, p, div, enz.:
Voorbeeld
.intro {background-color: yellow;}
h1 {background-color:
red;}
De universele selector (*) en overgeërfde waarden hebben een specificiteit van 0 - De universele selector (*) en overgeërfde waarden worden genegeerd!