A part !important, est-ce qu’il existe des trucs propres pour qu’un style prenne le dessus sur un autre avec lequel il est en concurrence?
La surcharge par ordre de déclaration dans la CSS :
Pour prendre la main, t’as la surcharge : tu déclares .box { padding: 12px; } puis plus loin, tu re-déclares .box { padding: 22px; }.
|
1 2 3 |
.box { padding: 12px; } .several-other-css-declaration { ... } .box { padding: 22px; } // <- déclaration qui sera prise en compte. |
C’est toujours la dernière déclaration rencontrée pour un élément donné qui est prise en compte et qui écrase toutes les précédentes.
Le ciblage par précision dans le chemin (dans le DOM) qui permet d’atteindre l’élément :
Code HTML :
|
1 2 3 4 5 6 7 |
<div class="riri"> <div class="fifi"> <div class="loulou"> Les castors juniors </div> </div> </div> |
Dans l’ordre de priorité tu as :
.riri .fifi .loulou{ font-size: 12px }(le + important).fifi .loulou { font-size: 22px; }.loulou { font-size: 42px; }(le – important)
Et là, plus tu seras précis dans la manière (le chemin) de cibler ton élément, plus tes styles prendront le dessus peu importe l’ordre dans lequel ils sont déclarés dans ta/tes CSS.
Il y a encore un cas supplémentaire dans la demo JSFiddle.net, donc à voir et à utiliser pour manipuler d’autres cas à l’avenir.