Que savez-vous de la spécificité des sélecteurs CSS ?

La spécificité détermine la priorité des règles CSS en cas de conflit, lorsque différents styles s'appliquent à un même élément. Elle est calculée pour chaque sélecteur dans la règle.

La spécificité est une évaluation numérique composée de quatre catégories (A, B, C, D), notée comme 0,0,0,0. Plus le nombre est élevé, plus la spécificité est grande.

Catégories :

• A (style en ligne): Styles définis par l'attribut style dans l'élément HTML. Ils ont la plus haute spécificité (par exemple, 1,0,0,0).
• B (ID): Sélecteurs par ID (par exemple, #mon-id). Augmentent le deuxième chiffre (par exemple, 0,1,0,0).
• C (Classe, Attribut, Pseudo-classe): Sélecteurs par classe (par exemple, .ma-classe), attribut (par exemple, [type="text"]), pseudo-classe (par exemple, :hover, :first-child). Augmentent le troisième chiffre (par exemple, 0,0,1,0).
• D (Élément, Pseudo-élément): Sélecteurs par balise HTML (par exemple, div, p) et pseudo-éléments (par exemple, ::before, ::after). Augmentent le quatrième chiffre (par exemple, 0,0,0,1).

Exemple de calcul :

• p - 0,0,0,1
• .ma-classe - 0,0,1,0
• #mon-id - 0,1,0,0
• div p - 0,0,0,2 (somme des spécificités des deux éléments)
• #mon-id .ma-classe - 0,1,1,0 (somme de l'ID et de la classe)
• div#mon-id.ma-classe:hover - 0,1,2,1 (somme de la balise, ID, classe et pseudo-classe)

Règles :

1. La spécificité du style en ligne est toujours supérieure à toute combinaison d'autres sélecteurs, sauf si la règle a le drapeau !important.
2. Les règles avec le drapeau !important ont la priorité la plus haute, écrasant même le style en ligne. Il n'est pas recommandé d'utiliser !important en raison de la difficulté de débogage.
3. En cas d'égalité de spécificité, la règle déclarée en dernier dans le fichier CSS est appliquée.
4. Le sélecteur universel (*) et :where() ont une spécificité de 0,0,0,0 et n'augmentent pas la spécificité totale.

/*
  Spécificité : 0,0,0,1
  S'appliquera s'il n'y a pas de règles plus spécifiques
*/
p {
  color: blue;
}

/*
  Spécificité : 0,0,1,0
  Écrasera la règle pour la balise p
*/
.text {
  color: green;
}

/*
  Spécificité : 0,1,0,0
  Écrasera la règle pour la classe .text
*/
#texte-principal {
  color: red;
}

/*
  Spécificité : 1,0,0,0
  S'appliquera si l'élément a l'attribut style="color: purple;"
*/
/* <p style="color: purple;">Texte</p> */

/*
  Spécificité très élevée, écrasera tout
  Il n'est pas recommandé de l'utiliser sauf en cas de nécessité absolue
*/
.override-text {
  color: black !important;
}