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

La spécificité en CSS est un mécanisme qui détermine quelle règle de style sera appliquée à un élément si plusieurs règles s’y rapportent.

Chaque sélecteur a son propre score de spécificité. Un score plus élevé indique une priorité plus haute.

Le calcul de la spécificité se base sur le nombre des composants suivants dans le sélecteur (par ordre décroissant d’importance):

• Centaines (1000): Règles avec !important (ont la priorité la plus haute, mais leur utilisation n’est pas recommandée).
• Centaines (100): Styles en ligne (écrits directement dans l’attribut style de la balise HTML).
• Centaines (100): Identifiants (sélecteurs par id, par exemple #mon-element).
• Dizaines (10): Classes (sélecteurs par .classe), pseudoclasses (par exemple :hover, :focus), attributs (par exemple [type="text"]).
• Unités (1): Types d’éléments (noms de balises HTML, par exemple div, p), pseudoelement (par exemple ::before, ::after).
• Zéro (0): Sélecteur universel (*), combinateurs (>, +, ~), sélecteur parent (:not(), :is(), :where()) n’ajoutent pas de spécificité en soi, mais peuvent influencer la spécificité à l’intérieur des parenthèses.

Exemple de calcul:

• p { ... } - Spécificité: 0-0-0-1
• .ma-classe { ... } - Spécificité: 0-0-1-0
• #mon-id { ... } - Spécificité: 0-1-0-0
• div.ma-classe { ... } - Spécificité: 0-0-1-1
• ul > li.item[data-id="1"] { ... } - Spécificité: 0-0-2-2 (li, ul = 2; .item, [data-id="1"] = 2)

Si deux règles ont la même spécificité, celle qui apparaît plus bas dans le fichier CSS est appliquée.

Exemple:

/* Fichier style.css */
.mon-element {
  color: blue; /* Spécificité: 0-0-1-0 */
}

#element-id {
  color: red; /* Spécificité: 0-1-0-0 */
}

.mon-element {
  font-weight: bold; /* Spécificité: 0-0-1-0, remplace la règle précédente avec la même spécificité */
}

Dans ce cas, le texte de l’élément avec l’id element-id sera rouge, et le texte de l’élément avec la classe mon-element sera bleu et en gras (le bleu est remplacé par le rouge pour l’élément avec les deux sélecteurs en raison de la spécificité plus élevée de #element-id).

Comprendre la spécificité est important pour écrire un CSS prévisible et facile à maintenir. Évitez une spécificité excessivement complexe et l’utilisation de !important pour une meilleure gestion des styles.