CSS Spécificité
Spécificité CSS
La spécificité CSS est un algorithme qui détermine quelle déclaration de style est finalement appliquée à un élément.
Si deux règles CSS ou plus pointent vers le même élément, la déclaration avec la spécificité la plus élevée "gagnera", et ce style sera appliqué à l'élément HTML.
Regardez les exemples suivants :
Exemple
Ici, nous avons spécifié une couleur rouge pour les éléments <p>. Résultat : Le texte sera rouge :
<html>
<head>
<style>
p {color: red;}
</style>
</head>
<body>
<p>Bonjour le monde !</p>
</body>
</html>
Maintenant, regardez le prochain exemple :
Exemple
Ici, nous avons ajouté un sélecteur de classe (nommé "test") et spécifié une couleur verte pour cette classe. Résultat : Le texte sera vert, car le sélecteur de classe a une spécificité plus élevée :
<html>
<head>
<style>
.test {color: green;}
p {color: red;}
</style>
</head>
<body>
<p class="test">Bonjour le monde !</p>
</body>
</html>
Maintenant, regardez le prochain exemple :
Exemple
Ici, nous avons ajouté le sélecteur d'id (nommé "demo"). Résultat : Le texte sera bleu, car le sélecteur d'id a une spécificité plus élevée :
<html>
<head>
<style>
#demo {color: blue;}
.test {color: green;}
p {color: red;}
</style>
</head>
<body>
<p id="demo" class="test">Bonjour le monde !</p>
</body>
</html>
Maintenant, regardez le prochain exemple :
Exemple
Ici, nous avons ajouté un style en ligne pour l'élément <p>. Résultat : Le texte sera rose, car le style en ligne a la spécificité 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;">Bonjour le monde !</p>
</body>
</html>
Hiérarchie de la spécificité CSS
Chaque type de sélecteur CSS a une position dans la hiérarchie de spécificité, et les types de sélecteurs portent des "poids" différents.
| Sélecteur | Exemple | Description | Poids |
|---|---|---|---|
| Styles en ligne | <h1 style="color: pink;"> | Priorité la plus élevée, remplacera tous les autres sélecteurs | |
| Sélecteurs d'id | #navbar | Deuxième priorité la plus élevée | 1-0-0 |
| Classes, sélecteurs d'attributs et pseudo-classes | .test, [type="text"], :hover | Troisième priorité la plus élevée | 0-1-0 |
| Éléments et pseudo-éléments | h1, ::before, ::after | Faible priorité | 0-0-1 |
| Sélecteur universel et :where() | *, where() | Pas de priorité | 0-0-0 |
La déclaration avec la spécificité/valeur de poids la plus élevée sera appliquée à l'élément.
Exemple
La hiérarchie de spécificité et le poids :
<html>
<head>
<style>
#demo {color: blue;} /* poids : 1-0-0 */
p#demo {color: orange;} /* poids : 1-0-1 GAGNE ! */
.test {color: green;} /* poids : 0-1-0 */
p.test {color: green;} /* poids : 0-1-1 */
p {color: red;} /* poids : 0-0-1 */
</style>
</head>
<body>
<p id="demo" class="test">Bonjour le monde !</p>
</body>
</html>
Plus d'exemples de spécificité
Spécificité égale : la dernière règle gagne
Si la même règle est écrite deux fois dans la feuille de style externe, la dernière règle gagne :
Exemple
h1 {background-color: yellow;}
h1 {background-color: red;}
Les sélecteurs d'id battent les sélecteurs d'attributs
Regardez les lignes de code suivantes : ici, la première règle a une spécificité plus élevée que la seconde et sera donc appliquée.
Exemple
#myDiv {background-color: yellow;}
div[id=myDiv] {background-color: blue;}
Un sélecteur de classe bat les 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 (*)
Le sélecteur universel (*) n'a pas de valeur de poids de spécificité :
Exemple
* {background-color: yellow;}
h1 {background-color: red;}
Les styles en ligne sont plus spécifiques que les feuilles de style externes
La feuille de style intégrée est plus proche de l'élément à styliser. Donc, dans la situation suivante, la dernière règle sera appliquée :
Exemple
/*Depuis le fichier CSS externe :*/
#content h1 {background-color: red;}
/*Dans le fichier HTML :*/
<style>
#content h1 {background-color: yellow;}
</style>