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é