Si vous réaliser l'intégration de sites Web, vous vous êtes surement déjà posé la question de quelle propriété allait être appliqué, selon quel ordre d'importance.
Sitepoint a écrit un article pour vous aidé dans la compréhension de ce mécanisme.
Je vous traduit ici le principe de base, en 5 étapes (par déclaration, on entend définition d'une propriété à appliquer comme la couleur du texte) :
- Si une déclaration est faite dans l'attribut style de l'élément, (un style en ligne, ex style="color: red;"), elle a la plus grande spécificité. S'il n'y a aucune déclaration en ligne, passer à l'étape 2.
- Compter le nombre de sélecteur d'ID (#monId). La déclaration avec le plus grand nombre est la plus spécifique. Si plusieurs déclarations ont le même nombre de sélecteur d'ID (ou 0), passez à l'étape 3.
- Compter le nombre de sélecteur de classes (.maClass), de sélecteur d'attributs ([type="submit"]) et de pseudo classes (:hover). La déclaration avec le plus grand nombre est la plus spécifique. Si plusieurs déclarations ont le même nombre (ou 0), passez à l'étape 4.
- Compter le nombre de sélecteur de type (div) et de pseudo éléments (:first-letter). La déclaration avec le plus grand nombre est la plus spécifique. Si plusieurs déclarations ont le même nombre (ou 0), passez à l'étape 5.
- Si deux ou plusieurs sélecteur ont la même spécificité, on applique la dernière règles trouvées.
Bien sûr, à chaque étape, on ne garde que ceux qui arrivent en tête du classement.
Puis l'article va plus loin en indiquant la méthode de calcul et une représentation en matrice, pour finir sur la gestion des éléments un peu plus poussé comme le sélecteur global * ou d'élément enfant avec >.
Un article à lire pour être conscient de comment fonctionne réellement les CSS, et s'éviter quelques maux de têtes dans certains cas...