!important

A unique modifier that allows you to apply a property value regardless of the usual specificity and cascade.

        
          
          .text {  color: green !important;}.text {  color: red;}
          .text {
  color: green !important;
}

.text {
  color: red;
}

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

By the logic of the cascade, the text in the block with the class text should be red because this rule is lower in the code. But because of the !important modifier, the text color will be green.

        
          
          #main-title {  color: purple;}.title {  color: blue !important;}
          #main-title {
  color: purple;
}

.title {
  color: blue !important;
}

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

In this example, the selector #main-title is more specific than .title. But the text color will be blue due to !important.

The !important modifier can be written after any value to nail down this value. It's important to write it with a space after the value and before the semicolon.

The !important modifier is the last argument in a style dispute. It should be used very carefully. Before using it in your code, make sure there is no other way.

Here’s a common scenario:

1. Hmm, why are my wonderful styles not applying?
2. Let’s use !important.
3. Now everything is great!

But this is not how it should be done. It's better to take the time to figure out the root cause.

Using !important, you may trip yourself or the next developer who comes to the project — overriding it will be catastrophically difficult.

If a tool exists, there must have been reasons for its emergence. Sometimes !important turns out to be useful.

There are cases when you have to deal with HTML document elements whose styles are defined using the style attribute:

        
          
          <h1 class="header" style="color: red">  Title</h1>
          <h1 class="header" style="color: red">
  Title
</h1>

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

You will not be able to override the color property of the <h1> element even by increasing the specificity of the selector:

        
          
          h1.header {  color: green;}
          h1.header {
  color: green;
}

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

As a result, the text color will remain red. Here the !important modifier can help you override the styles:

        
          
          .header {  color: green !important;}
          .header {
  color: green !important;
}

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

As a result, the color of <h1> will change to green.

If you are working on a project with a large and old codebase, it can be risky to modify existing styles — who knows what might break. In such situations, new styles are appended to override the old ones, and if specificity is lacking — !important is added.

Assume you are involved in the development of a browser extension that adds some element to the page. To prevent the styles of your extension from conflicting with and being overridden by the styles of the website itself, it is acceptable to use !important.

Use a more specific selector combined with !important:

        
          
          h2 span {  font-size: 50px !important;}#main-title span {  font-size: 20px !important;}.title span {  font-size: 10px !important;}
          h2 span {
  font-size: 50px !important;
}

#main-title span {
  font-size: 20px !important;
}

.title span {
  font-size: 10px !important;
}

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

Although all three CSS rules use !important, the font size will be 20 pixels because the selector #main-title span "weighs" more than the others.

Write the exact same rule with !important lower in the code, but with a different property value.

        
          
          h2 span {  font-size: 50px !important;}h2 span {  font-size: 10px !important;}
          h2 span {
  font-size: 50px !important;
}

h2 span {
  font-size: 10px !important;
}

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

In this battle, the rule that appears lower will win — because of the cascade nature of styles. The text size will be 10 pixels.

💡 If you had to use !important in your code, then it is a signal of serious problems. Take the time to find the root cause. Make an effort not to use this modifier.