Spécificité CSS
Qu'est-ce que la spécificité ?
S'il y a deux règles CSS ou plus qui pointent vers le même élément, le sélecteur avec la valeur de spécificité la plus élevée "gagnera" et sa 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ée à un élément.
Regardez les exemples suivants :
Exemple 1
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>
Maintenant, regardez l'exemple 2 :
Exemple 2
Dans cet exemple, nous avons ajouté un sélecteur de classe (nommé "test"), et spécifié une couleur verte pour cette classe. Le texte sera maintenant vert (même si nous avons spécifié une couleur rouge pour le sélecteur d'élément "p". C'est parce que le sélecteur de classe a une priorité plus élevée :
<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 :
Exemple 3
Dans cet exemple, nous avons ajouté le sélecteur d'identifiant (nommé "demo"). Le texte sera désormais bleu, car le sélecteur d'identifiant est prioritaire :
<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 :
Exemple 4
Dans cet exemple, nous avons ajouté un style en ligne pour l'élément "p". Le texte sera désormais rose, car le style en ligne a la plus haute priorité :
<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>
Hiérarchie de spécificité
Chaque sélecteur CSS a sa place dans la hiérarchie des spécificités.
Quatre catégories définissent le niveau de spécificité d'un sélecteur :
- Styles intégrés - Exemple : <h1 style="color: pink;">
- ID - Exemple : #navbar
- Classes, pseudo-classes, sélecteurs d'attributs - Exemple : .test, :hover, [href]
- Eléments et pseudo-éléments - Exemple : h1, :before
Comment calculer la spécificité ?
Mémorisez comment calculer la spécificité !
Commencez à 0, ajoutez 100 pour chaque valeur d'ID, ajoutez 10 pour chaque 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 a toujours la priorité la plus élevée !
Remarque 2 : Il existe une exception à cette règle : si vous utilisez la !important
règle, elle 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 avec la valeur de spécificité la plus élevée gagnera et prendra effet !
Considérez ces trois fragments de code :
Exemple
A: h1
B: h1#content
C: <h1 id="content" style="color:
pink;">Heading</h1>
La spécificité de A est de 1 (un sélecteur d'élément)
La spécificité de B est de 101 (une référence ID + un sélecteur d'élément)
La spécificité de C est de 1000 (style en ligne)
Puisque la troisième règle (C) a la valeur de spécificité la plus élevée (1000), cette déclaration de style sera appliquée.
Plus d'exemples de règles de spécificité
Même spécificité : 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 :
Exemple
h1 {background-color: yellow;}
h1 {background-color: red;}
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 :
Exemple
div#a {background-color: green;}
#a {background-color: yellow;}
div[id=a] {background-color: blue;}
la première règle est plus spécifique que les deux autres, et sera donc appliquée.
Les sélecteurs contextuels sont plus spécifiques qu'un sélecteur d'élément unique - La feuille de style intégrée est plus proche de l'élément à styliser. Donc dans la situation suivante
Exemple
From external CSS file:
#content h1 {background-color: red;}
In HTML file:
<style>
#content h1 {background-color:
yellow;}
</style>
cette dernière règle 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 :
Exemple
.intro {background-color: yellow;}
h1 {background-color:
red;}
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 !