Propriété CSS !important
Ce qui est important?
Le !important La règle en CSS est utilisée pour ajouter plus d’importance à une propriété/valeur que la normale.
En effet, si vous utilisez le !important règle, elle remplacera TOUTES les règles de style précédentes pour cette propriété spécifique sur cet élément !
Prenons un exemple :
Exemple
#ma pièce d’identité {
couleur de fond : bleu ;
}
.Ma classe {
couleur de fond : gris ;
}
p {
couleur d’arrière-plan : rouge !important ;
}
Essayez-le vous-même »
Exemple expliqué
Dans l’exemple ci-dessus. les trois paragraphes auront une couleur de fond rouge, même si le sélecteur d’ID et le sélecteur de classe ont une spécificité plus élevée. Le !important la règle prévaut sur
background-color
À propos de !important
La seule façon de remplacer un !important
règle est d’inclure un autre !important
se prononcer sur une déclaration avec la même (ou plus) spécificité dans le code source – et ici le problème commence ! Cela rend le code CSS déroutant et le débogage sera difficile, surtout si vous avez une grande feuille de style !
Ici, nous avons créé un exemple simple. Il n’est pas très clair, quand on regarde le code source CSS, quelle couleur est considérée comme la plus importante :
Exemple
#ma pièce d’identité {
couleur d’arrière-plan : bleu !important ;
}
.Ma classe {
couleur d’arrière-plan : gris !important ;
}
p {
couleur d’arrière-plan : rouge !important ;
}
Essayez-le vous-même »
Conseil: Il est bon de connaître le !important
règle. Vous pouvez le voir dans certains codes source CSS. Cependant, ne l’utilisez que si vous y êtes absolument obligé.
Peut-être une ou deux utilisations équitables de !important
Une façon d’utiliser !important est si vous devez remplacer un style qui ne peut pas être remplacé d’une autre manière. Cela peut se produire si vous travaillez sur un système de gestion de contenu (CMS) et que vous ne pouvez pas modifier le code CSS. Ensuite, vous pouvez définir des styles personnalisés pour remplacer certains des styles CMS.
Une autre façon d’utiliser !important est : Supposons que vous vouliez un look spécial pour tous les boutons d’une page. Ici, les boutons sont stylisés avec une couleur d’arrière-plan grise, du texte blanc et un peu de rembourrage et de bordure :
Exemple
.bouton {
couleur de fond : #8c8c8c ;
Couleur blanche;
rembourrage : 5px ;
bordure : 1 pixel noir uni ;
}
Essayez-le vous-même »
L’apparence d’un bouton peut parfois changer si nous le plaçons dans un autre élément avec une spécificité plus élevée, et les propriétés entrent en conflit. En voici un exemple :
Exemple
.bouton {
couleur de fond : #8c8c8c ;
Couleur blanche;
rembourrage : 5px ;
bordure : 1 pixel noir uni ;
}
#myDiv a {
La couleur rouge;
couleur de fond : jaune ;
}
Essayez-le vous-même »
Pour “forcer” tous les boutons à avoir la même apparence, quoi qu’il arrive, on peut ajouter le !important
règle aux propriétés du bouton, comme ceci :
Exemple
.bouton {
couleur d’arrière-plan : #8c8c8c !important ;
couleur : blanc ! important ;
rembourrage : 5px !important;
bordure : 1 pixel noir uni !important ;
}
#myDiv a {
La couleur rouge;
couleur de fond : jaune ;
}
Essayez-le vous-même »
#Propriété #CSSimportant