CSS !important Rule


!important rule is used in an element/property to override all previously defined styling rules in that specific element/property. Hence, in CSS, the !important rule is used to add more importance to a property than normal. For Example:


.class1 {
  background-color: gray;
}
p {
  background-color: purple !important;
}
Live Demo!


Output:

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.



In the above example, !important rule overrides the background-color property in the class element. Hence, the background-color properties in both elements have purple color even though the class selector has a higher specificity.


How overriding !important becomes confusing


The !important rule can be overridden only by including another !important rule on a declaration with the same (or higher) specificity in the source code. But, this makes the CSS code confusing and the debugging becomes hard, especially when the code is big.

For Example:


.myclass {
  background-color: grey !important;
}
p {
  background-color: red !important;
}
Live Demo!


Output:

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.


In the above example, it is not very clear in the code, which color is considered most important.


How to avoid the confusion


Let's take an example of buttons and understand this. We want a special look for all buttons on a page and, the buttons are styled with a gray background color, white text, and some padding and border. But, the look of a button can sometimes change if it is put inside another element with higher specificity. Then, the properties gets in conflict.

For Example:


<!DOCTYPE html>
<html>
<head>
<style>
.first-class {
  background-color: grey;
  color: white;
  padding: 5px !important;
  border: 1px solid black !important;
}
#parentDiv button {
  color: red;
  background-color: yellow;
}
</style>
</head>
<body>

<p>Standard button: </p><button class="first-class">click here</button>
<div id="parentDiv">
  <p>Inside parentDiv: </p>
  <button class="first-class">New Button </button>
</div>

</body>
</html>
Live Demo!


So, To force all buttons to have the same look, no matter what, we can add the !important rule to the properties of the button, like this:



.first-class { /* Class Applied on Button */
  background-color: grey !important;
  color: white !important;
  padding: 5px !important;
  border: 1px solid black !important;
}
#myDiv button {   /* Also for the button */
  color: red;
  background-color: yellow;
}
Live Demo!

In this manner all the css properties having the important rule will get applied on all the buttons and override the other properties!