Spécificité CSS

Qu'est-ce que la spécificité ?

Si deux ou plusieurs règles CSS conflictuelles pointent vers le même élément, le navigateur suit certains principes pour déterminer laquelle est la plus spécifique et donc la gagnante.

Considérez la spécificité (specificity) comme un score / niveau qui permet de déterminer quelles déclarations de styles seront finalement appliquées aux éléments.

Les sélecteurs universels (* ) ont une spécificité faible, tandis que les sélecteurs d'ID ont une spécificité élevée !

Attention :Cette spécificité est une raison courante pour laquelle les règles CSS ne s'appliquent pas à certains éléments, bien que vous puissiez penser qu'elles devraient l'être.

Hiérarchie de spécificité

Chaque sélecteur a sa place dans la hiérarchie de spécificité. Les quatre catégories suivantes définissent le niveau de spécificité des sélecteurs :

Styles en ligne - Les styles en ligne (inline) sont directement ajoutés à l'élément à styler. Exemple : <h1 style="color: #ffffff;">.

ID - Un ID est un identificateur unique de l'élément de la page, par exemple #navbar.

Classes, attributs et pseudo-classes - Cette catégorie inclut .classes, [attributes] et les pseudo-classes, par exemple :hover, :focus, etc.

Éléments et pseudo-éléments - Cette catégorie inclut les noms d'éléments et les pseudo-éléments, tels que h1, div, :before et :after.

Comment calculer la spécificité ?

N'oubliez pas la méthode de calcul de la spécificité !

À partir de 0, ajoutez 1000 pour le style, 100 pour chaque ID, 10 pour chaque attribut, classe ou pseudo-classe, et 1 pour chaque nom d'élément ou pseudo-élément.

Pensez aux trois fragments de code suivants :

Exemple

A: h1
B: #content h1
C: <div id="content"><h1 style="color: #ffffff">Titre</h1></div>
  • La spécificité de A est de 1 (un élément)
  • La spécificité de B est de 101 (un ID et un élément)
  • La spécificité de C est de 1000 (style en ligne)

Comme 1 < 101 < 1000, la troisième règle (C) a une spécificité supérieure et sera donc appliquée.

Règle de spécificité 1 :

En cas d'égalité de spécificité : la règle la plus récente est importante - Si la même règle est écrite deux fois dans la feuille de style externe, la règle la plus proche de l'élément à styler sera appliquée :

Exemple

h1 {background-color: yellow;}
h1 {background-color: red;}

Essayez-le vous-même

La règle suivante est toujours applicable.

Règle de spécificité 2 :

Les sélecteurs d'ID ont une spécificité supérieure aux 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;}

Essayez-le vous-même

La première règle est plus spécifique que les deux autres, donc elle sera appliquée.

Règle de spécificité 3 :

Les sélecteurs contextuels sont plus spécifiques que les sélecteurs d'éléments - Les feuilles de style en ligne sont plus proches des éléments sur lesquels elles sont appliquées. Par conséquent, dans les cas suivants :

Exemple

provenant d'un fichier CSS externe :

#content h1 {background-color: red;}

Dans le fichier HTML :

<style>
#content h1 {
  background-color: yellow;
}
</style>

La règle suivante s'appliquera.

Règle de spécificité 4 :

Les sélecteurs de classe vaincront un nombre quelconque de sélecteurs d'éléments - Sélecteurs de classe (comme .intro qui vaincra h1, p, div, etc.) :

Exemple

.intro {background-color: yellow;}
h1 {background-color: red;}

Essayez-le vous-même

De plus,Les sélecteurs universels et les valeurs héritées ont une spécificité de 0 La spécificité de * et body * ainsi que les valeurs héritées ont une spécificité de 0. La spécificité des valeurs héritées est également de 0.