Spécificités

Lorsque 2 règles CSS pointant vers un même élément entrent en conflit, la navigateur suit certaines règles pour déterminer laquelle des deux est la plus spécifique, et donc laquelle des deux doit être utilisée.

Il est possible d’imaginer le système de spécificité comme un classement qui détermine quelle déclaration de style doit être appliquée de manière prioritaire à un élément.

Le sélecteur universel * a une spécificité basse, tandis que les sélecteurs ID ont une spécificité importante.

Hiérarchie de spécificité

Chaque sélecteur a une place dans la hiérarchie de la spécificité. Il y a en tout 4 catégories qui définissent le niveau d’un sélecteur :

• Le style inline : c’est le style qui est défini directement dans les balises d’un élément inline, tel que <p style="color: red;">
• Les ID : C’est un identifiant unique pour les éléments de la page
• Classes, attributs et pseudo-classes
• Éléments et pseudo-éléments

Calculer la spécificité

Voici comment calculer la spécificité :

• Partir de 0
• Ajouter 1000 points pour les attributs style inline
• Ajouter 100 points pour chaque ID
• Ajouter 10 points pour chaque classe, attribut et pseudo-classe
• Ajouter 1 point pour chaque élément et pseudo-élément

1: <p>
2: #page p
3: <span style="color: red; font-family: sans-serif;">Texte</span>

Dans l’exemple ci-dessus, c’est le point 3 qui est plus haut dans la hiérarchie, car il a 1000 points grâce à l’attribut style ; tandis que le point 1 n’a qu’1 point puisque c’est un élément et le point 2 a 100 points comme c’est un id.

Règles concernant la spécificité