La directive CSS !important pour les préférences

Associer !important à une propriété CSS permet de donner la précédence à celle-ci, quelle que soit la position dans la feuille de style ou elle est déclarée.

Syntaxe

.maclasse
{
  color:black; !important
}

Le directive s'applique seulement aux valeurs de la propriété qui sont définies. Dans le cas de la forme raccourcie (ex: border: 2px solid black) elle s'applique à toutes les valeurs de la propriété.

Par exemple :

font: normal 12px Arial !important
font-size: 20px

La taille de police sera de 12px bien qu'elle ait été redéfinie, car la première définition est marquée comme importante.

Feuille de style utilisateur

L'utilisateur du navigateur peut définir sa propre feuille de style qui s'appliquera à toutes les pages.

Sous Firefox, elle se trouve dans le fichier userContent.css, dans les sous-répertoires du programme.

Par défaut, la feuille de style de l'auteur définie dans la page prend le pas sur celle qui est par l'utilisateur, mais ce n'est pas le cas si la directive !important est ajoutée dans cette dernière.

Cependant si l'utilisateur et l'auteur ajoutent tous deux cette directive, c'est l'utilisateur qui prend le pas.

Modifier les précédences

Le rôle de !important donc est de surclasser les précédences à l'intérieur d'une feuille de style ou entre les feuilles de style auteur et utilisateur.

Démonstration de la directive...

.maclasse
{
   color:green; !important
   color:red;
}
<p class="maclasse">Cette ligne doit être verte.</p>

Cette ligne doit être verte.

h5
{
   color: green !important;
   color: red;
}
</style>
<h5>Cette ligne doit être verte.</h5>
Cette ligne doit être verte.
.maclasse
{
   font:italic 100% Verdana!important;
   color: green!important;
   font-style:normal;
   color: red;
}
<p class="maclasse">Cette ligne doit êre verte et en italiques.</p>

Cette ligne doit être verte et en italiques.

Plus d'information

© 2010-2022 Xul.fr