CSS !important Rule

The !important rule in CSS is used to give a property or value the highest priority, making it more significant than usual.

When you apply the !important rule to a property, it will override any other styling rules for that property on the element, regardless of where they appear in the stylesheet.

HTML

<p id="sample" class="sample">This is a paragraph.</p>

CSS

#sample {
  background-color: red;
}
p {
  background-color: green !important;
}
.sample {
  background-color: blue;
}

In this example, because of the !important rule, the paragraph will have a green background color, despite the ID and class selectors having higher specificity, as you can see in the below preview.

Overriding !important with !important

The only way to override an !important rule is to use another !important rule in a declaration with the same or higher specificity. However, this can lead to complications. It makes the CSS code harder to read and debug, especially when dealing with a large stylesheet.

HTML

<p id="sample" class="sample">This is a paragraph.</p>

CSS

p {
  background-color: red !important;
}
#sample {
  background-color:green !important;
}
.sample {
  background-color: blue !important;
}

In this example, the !important rule in the ID selector will override all other !important rules because it has the specificity, as you can see in the below preview.

Note: It's useful to be aware of the !important rule, as you may encounter it in CSS code. However, it's best to avoid using it unless it's absolutely necessary.

Important Uses of !important

Use Case 1

One scenario where you might use !important is when you need to override a style that can't be changed through other methods. For example, if you're working within a Content Management System (CMS) and don't have access to edit the default inline styles, you can apply custom styles using !important to override the CMS defaults.

Use Case 2

Another instance for using !important could be when you want to apply a consistent look to all buttons on a page. 

For instance, the appearance of a button can occasionally change when placed inside another element with higher specificity, leading to conflicting styles. Here's an example of how this can happen:

HTML

<a class="button" href="#">Button</a>

<div id="special-button">
  <a class="button" href="#">Button</a>
</div>

CSS

.button {
  background-color: #ddd; 
  color: white;
  padding: 5px;
  border: 1px solid #333333; 
}
#special-button a {
  color: white;
  background-color:green;
  border: 1px solid red;
}

In the above example, the special button selector as overridden the default button style, as you can see in the below preview.

To ensure all buttons maintain a consistent appearance regardless of other styles, you can add the !important rule to the button's properties, like this:

.button {
  background-color: #ddd !important; 
  color: red !important;
  padding: 5px !important;
  border: 1px solid #333333 !important; 
}
#special-button a {
  color: white;
  background-color:green;
  border: 1px solid red;
}