Spécificité et priorité du sélecteur CSS

Lorsque plusieurs sélecteurs CSS s'appliquent à un seul élément, le navigateur doit déterminer quel sélecteur est prioritaire. C'est ce qu'on appelle la spécificité du sélecteur.

Règles pour déterminer la spécificité du sélecteur :

1. !important et remplacement des styles en ligne :

   • Les styles déclarés avec l'indicateur !important ou en ligne à l'aide de l'attribut style ont le niveau le plus élevé. priorité.

2. Spécificité :

   • La spécificité d'un sélecteur est déterminée par le nombre et le type de ses composants :

     • #id a une spécificité plus élevée que .classname
     • .classname a une spécificité plus élevée que tagname

3. La dernière règle prévaut :

   • Si deux sélecteurs ont la même spécificité, celui déclaré en dernier dans le fichier CSS est prioritaire.

Exemple :

Considérez les règles CSS suivantes :

body { font-size: 14px; }
#header { font-size: 16px; }

Pour l'élément

dans le , les deux règles s'appliquent. Cependant, étant donné que le sélecteur #header a une spécificité plus élevée (#id > tagname), sa valeur de taille de police de 16 px sera appliquée à l'élément

.

Remarque :

Il n'est pas rare d'avoir plusieurs règles ciblant le même élément avec différents niveaux de spécificité. Cela peut être utilisé pour affiner les styles pour des cas spécifiques ou remplacer les règles globales pour des instances spécifiques.