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.
Fondamental : Comment changer la couleur de fond d’une balise ?
Il existe trois façons d’écrire cette règle :
Dans une feuille de style externe :
p { background-color:blue; }
Dans une balise <style>
intégrée à la page :
<style>
p { background-color:white; }
</style>
Directement dans l’attribut style
de la balise :
<p style="background-color:red" >Je suis en rouge</p>
Fondamental : De quelle couleur sera le paragraphe ?
La couleur appliquée correspond à la règle qui est lue en dernier par le navigateur, lorsque plusieurs règles ont la même spécificité.
Le navigateur lit d’abord les feuilles de style externes et les blocs <style>
dans l’ordre où ils apparaissent, puis applique enfin les styles définis directement dans l’attribut style
des balises.
Dans cet exemple, le paragraphe sera rouge. En effet, lorsqu’il est présent, l’attribut style
l’emporte toujours sur les autres règles.
Fondamental : Les sélecteurs
Si des sélecteurs identiques ciblent un même élément, se référer à ce qui a été expliqué précédemment. Cependant, plusieurs sélecteurs différents peuvent également s’appliquer à une même balise.
<div class="unDiv" id="leDiv">
<p class="unP" id="leP">C'est moi</p>
</div>
p {background-color:blue}
div p {background-color:white}
.unP {background-color:red}
#leDiv p.unP {background-color:gray}
Pour déterminer la règle CSS à appliquer à un élément, on utilise la notion de spécificité :
Compter le nombre d’identifiants (
id
) dans le sélecteur :Le sélecteur avec le plus d’identifiants l’emporte.
En cas d’égalité, compter le nombre de classes et d’attributs :
Celui qui en contient le plus l'emporte.
En cas d’égalité, compter le nombre d’éléments (tags) et de pseudo-éléments (
::before
,::after
, etc.) :Le plus grand nombre l’emporte.
Si tout est encore égal, c’est l’ordre d’apparition dans le code se référer à ce qui a été expliqué précédemment.
div#leDiv.unDiv p#leP.unP:before // 2,2,3
#leDiv p.#leP // 2,0,1
p // 0,0,1
Exemple :
See the Pen cours-css-priorites by BCMM-W2D (@bcmm-w2d) on CodePen.