Priorités
En cas de déclaration de plusieurs règles CSS sur un même élément, il existe deux sortes de priorités.
Une au niveau de l'intégration des règles (attribut, balise ou feuille) et une au niveau de l'écriture des sélecteurs.
Définition : attribut, balise et feuille
Pour changer la couleur de fond d'une balise, il existe trois endroits différents pour l'écrire.
Dans une feuille de style externe :
p {background-color:blue}
Dans la balise style de la page :
<style>p {background-color:white}
</style>Dans l'attribut style de la balise :
<p style="background-color:red" >Je suis en rouge</p>
De quelle couleur sera le paragraphe ?
La réponse est l'information la dernière interprétée.
En effet, le navigateur commence par interpréter les feuilles externes ou la balise <style> dans l'ordre de leur écriture, puis l'attribut style. Chaque lecture pouvant écraser les informations précédentes.
Dans notre cas le paragraphe sera en rouge. Dans tous les cas, s'il existe, c'est l'attribut style qui l'emporte.
Définition : Les sélecteurs
En cas de sélecteurs identiques voir précédemment. Mais, plusieurs sélecteurs différents peuvent aboutir à la même balise.
<div class="unDiv" id="leDiv">
<p class="unP" id="leP">C'est moi</p>
</p>
p {background-color:blue}
div p {background-color:white}
.unP {background-color:red}
#leDiv p.unP {background-color:gray}
Pour trouver la bonne règle à appliquer, On cherche le sélecteur qui a le plus de poids :
On compte le nombre d'identifiants dans le sélecteur
Celui qui en a le plus a gagné
En cas d'égalité, on compte le nombre de classes et d'attributs
Celui qui en a le plus a gagné
En cas d'égalité, on compte le nombre d'éléments (tag) et de pseudo-éléments ( :before, :after...)
Celui qui en a le plus a gagné
En cas d'égalité voir la règle de l'ordre d'interprétation.
div#leDiv.unDiv p#leP.unP:before // 2,2,3
#leDiv p.#leP // 2,0,1
p // 0,0,1
Exemple :
p{background-color:bisque;
}
p[lang]{
background-color:rosybrown;
}
#titi p{
color : darkcyan;
}
.toto {color : red;
}
p.toto, p#tata.toto {
color: chartreuse;
}
<div id="titi">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
<p lang="la">exercitation ullamco laboris nisi ut aliquip ex ea</p>
<p id="tata" class="toto">Sed ut perspiciatis unde omnis iste natus error sit voluptatem</p>
<p class="toto">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis</p>
</div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit
exercitation ullamco laboris nisi ut aliquip ex ea
Sed ut perspiciatis unde omnis iste natus error sit voluptatem
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis