Pour compléter ce que dit Laurent : il y a plein de manières de donner du poids à un sélecteur dans le but d'écraser une règle déjà définie ailleurs dans les feuilles de styles, ou même en ligne. Le mieux est de trouver la règle déjà existante afin de l'écraser efficacement (ou même de la modifier directement si lorsque cela est possible et pertinent).
Exemple de sursélection avec l'ajout de la classe d'un conteneur :
.hsContainer .white {
color: white;
}
Une sélection avec encore plus de poids que la précédente :
.hsContainer .hsContent .white {
color: white;
}
On aurait aussi pu prendre un élément parent générique (ça fait le job, mais je ne suis pas fan) :
html .white {
color: white;
}
Dans le front on a aussi des effets de mode, comme par exemple avec le pseudo-élément
:root (à peine adopté par certains que déjà déconseillé par d'autres qui préfèrent le réserver pour une utilisation spécifique, comme la définition des variables CSS) :
:root .white {
color: white;
}
Une autre manière de faire une sursélection avec l'inclusion du tag html associé à la classe :
h1.white {
color: white;
}
Les ID ont plus de poids que les classes, les classes sont elles-même plus spécifiques que les tags html, toutes ces techniques se combinent, etc... Ces règles fonts partie de la base de la définition des styles et ne doivent pas être de la magie pour vous. Un peu de lecture à lire absolument, ainsi vous comprendrez tout :
-
Comprendre le poids des règles css
-
Poids des sélecteurs Css
Enfin, en dernier recours, n'oublions pas le bazooka évoqué sur un autre topic, mais qui obéira aux mêmes règles de ciblage si un !important est lui-même posé ailleurs dans le code :
.white {
color: white !important;
}
Modifié par Olivier C (19 Dec 2021 - 10:03)
