Chaque sélecteur en CSS se voit attribuer un pointage. Lorsque deux sélecteurs ciblent les mêmes propriétés d’un même élément, le sélecteur avec le plus haut pointage l’emporte. Le style de sa propriété est donc attribué à l’élément ciblé au détriment de celui du sélecteur plus faible.
En règle générale, il est conseillé de garder le pointage de ses sélecteurs le plus faible possible. Ainsi, si l’apparence d’un élément doit changer dans un contexte spécifique, il sera facilement possible d’écraser ses styles de bases avec un sélecteur doté d’un plus grand pointage.
Pointage par sélecteurs
Universel *
Le sélecteur universel * est le plus faible des sélecteurs avec une valeur de 0 point. Il peut donc être écrasé par tout autre sélecteur.
* { ... }Balise
Un sélecteur avec une balise à une valeur de 1 point.
div { ... }Classe, pseudo-classe et attribut
Ont tous une valeur de 10 points de spécificité.
Classe
.element { ... }Pseudo-classe
:hover { ... }Attribut
[title="demo"] { ... }ID
Un sélecteur avec un ID à une valeur de 100 points.
#no1 { ... }Style en ligne
Les styles en ligne ont une valeur de 1 000 points, ils sont donc extrêmement difficiles à écraser en cas de besoin, d’où pourquoi leur usage est à éviter autant que possible.
<div style="color: blue;">...</div>!important
En dernier recours, il est possible d’ajouter la mention !important à la fin d’une déclaration CSS afin de lui attribuer 10 000 points de spécificité et ainsi s’assurer d’écraser tout autre style.
.element {
color: blue !important; /* 10 000 points */
background: red; /* 10 points */
}Puisque !important est ajouté à une propriété directement, sa présence n’impacte que la valeur de cette propriété et non celle de l'ensemble de la règle CSS.
Combinaison de sélecteurs
La valeur de chaque sélecteur s'additionne dans un groupe de sélecteurs.
Par exemple l’élément HTML suivant:
<div class=”element no1”>Balise seule
Ciblé avec uniquement sa balise
div { … } La balise ne vaut que 1 point.
Classe seule
.item { … }La classe seule ne vaut que 10 points.
Balise & Classe
mais combiné la balise et une classe
div.item { … }Donne au groupe de sélecteur une valeur de 11 points.
Classe & Classe
Combiner les 2 classes
.item.no1 { … }Donne une valeur de 20 points.
Balise & Classe & Classe
Et finalement combiner la balise aux deux classes
div.item.no1 { … }Donne 21 points.
Égalité de pointage
Lorsque deux sélecteurs ont un pointage identique.
Par exemple pour l’élément HTML suivant:
<div class=”element no1”>Les sélecteurs ci-dessous auront tous deux une valeur de spécificité équivalente à 10 points.
.element { … }
.no1 { … }Cependant, les styles du sélecteur .no1 auront priorité sur ceux de .element puisque .no1 est écrit en dernier et est donc considéré comme étant la définition la plus récente, donc celle prioritaire en cas d’égalité.
Le simple fait d’inverser ces sélecteurs dans le code CSS donnerait priorité aux styles de .element au détriment de ceux de .no1.