S'il y a deux règles CSS ou plus qui pointent vers la même élément, le sélecteur avec la valeur de spécificité la plus élevée "gagnera", et son La déclaration de style sera appliquée à cet élément HTML.
Considérez la spécificité comme un score/rang qui détermine quelle déclaration de style est finalement appliqué à un élément.
Regardez les exemples suivants :
Dans cet exemple, nous avons utilisé l'élément "p" comme sélecteur, et spécifié une couleur rouge pour cet élément. Le texte sera rouge :
<html>
<head>
<style>
p {color: red;}
</style>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<head>
<style>
p {color: red;}
</style>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
Maintenant, regardez l'exemple 2 :
Dans cet exemple, nous avons ajouté un sélecteur de classe (nommé "test"), et spécifié un vert couleur pour cette classe. Le texte sera désormais vert (même si nous avons précisé un rouge couleur du sélecteur d'élément "p"). C'est parce que le sélecteur de classe est donné priorité plus élevée :
<html>
<head>
<style>
.test {color: green;}
p {color: red;}
</style>
</head>
<body>
<p class="test">Hello World!</p>
</body>
</html>
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<head>
<style>
.test {color: green;}
p {color: red;}
</style>
</head>
<body>
<p class="test">Hello World!</p>
</body>
</html>
Maintenant, regardez l'exemple 3 :
Dans cet exemple, nous avons ajouté le sélecteur d'identifiant (nommé "demo"). Le texte sera maintenant bleu, car le sélecteur d'identifiant a une priorité plus élevée :
<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>
Essayez-le vous-même →
<!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>
Maintenant, regardez l'exemple 4 :
Dans cet exemple, nous avons ajouté un style en ligne pour l'élément "p". Le le texte sera désormais rose, car le style en ligne aura la priorité la plus élevée :
<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>
Essayez-le vous-même →
<!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>
Chaque sélecteur CSS a sa place dans la hiérarchie des spécificités.
Il existe quatre catégories qui définissent le niveau de spécificité d'un sélecteur :
1. Styles en ligne - Exemple :
<h1 style="color: pink;">
2. ID - Exemple :
#navbar
3. Classes, pseudo-classes, sélecteurs d'attributs - Exemple :
.test, :hover, [href]
4. Éléments et pseudo-éléments - Exemple :
h1, ::before
Mémorisez comment calculer la spécificité !
Commencez à 0, ajoutez 100 pour chaque valeur d'ID, ajoutez 10 pour chacune valeur de classe (ou pseudo-classe ou sélecteur d'attribut), ajoutez 1 pour chaque sélecteur d'élément ou pseudo-élément.
Remarque : Le style en ligne obtient une valeur de spécificité de 1 000 et est toujours la plus haute priorité !
Remarque 2 : Il existe un exception à cette règle : si vous utilisez le !important
En règle générale, il remplacera même les styles en ligne !
Le tableau ci-dessous montre quelques exemples sur la façon de calculer les valeurs de spécificité :
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) |
Le sélecteur ayant la valeur de spécificité la plus élevée gagnera et prendra effet !
Considérez ces trois fragments de code :
A: h1
B: h1#content
C: <h1 id="content" style="color:
pink;">Heading</h1>
La spécificité de A est 1 (un sélecteur d'élément)
La spécificité de B est 101 (une référence ID + un sélecteur d'élément)
La spécificité du C est 1000 (style en ligne)
Puisque la troisième règle (C) a la valeur de spécificité la plus élevée (1000), ce style La déclaration sera appliquée.
Spécificité égale : la dernière règle l'emporte - Si la même règle est écrite deux fois dans la feuille de style externe, alors la dernière règle l'emporte :
h1 {background-color: yellow;}
h1 {background-color: red;}
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<head>
<style>
h1 {background-color: yellow;}
h1 {background-color: red;}
</style>
</head>
<body>
<h1>This is heading 1</h1>
</body>
</html>
Les sélecteurs d'ID ont une spécificité plus élevée que les sélecteurs d'attribut - Regardez les trois lignes de code suivantes :
div#a {background-color: green;}
#a {background-color: yellow;}
div[id=a] {background-color: blue;}
Essayez-le vous-même →
<!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>
la première règle est plus précise que les deux autres, et sera donc appliquée.
Les sélecteurs contextuels sont plus spécifiques qu'un seul élément selector - La feuille de style intégrée est plus proche de l'élément à styliser. Donc dans le situation suivante
From external CSS file:
#content h1 {background-color: red;}
In HTML file:
<style>
#content h1 {background-color:
yellow;}
</style>
c'est cette dernière règle qui sera appliquée.
Un sélecteur de classe bat n'importe quel nombre de sélecteurs d'éléments - un sélecteur de classe tel que .intro bat h1, p, div, etc :
.intro {background-color: yellow;}
h1 {background-color:
red;}
Essayez-le vous-même →
<!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>
Le sélecteur universel (*) et les valeurs héritées ont une spécificité de 0 - Le sélecteur universel (*) et les valeurs héritées sont ignorés !