CSS !important

Adding !important to a declaration lifts it above normal declarations, whatever their specificity.

1
2
3
4
5

<style>
  #intro { color: red; }
  .note { color: blue !important; }
</style>
<p id="intro" class="note">I am blue, even though an ID selector wants me red.</p>

The ID rule is much more specific, but !important beats it.

Why it is a trap

Once you use it, the only way to override it is another !important with equal or higher specificity, or later in the file. A stylesheet full of !important becomes a shouting match where nothing can be changed without making it louder.

1
2
3
4

/* Today */
.button { background: blue !important; }
/* Next month, a variant needs a different color */
.button-danger { background: red !important; }  /* and now order decides */

Better alternatives

1. Look at the real cause. Find the rule that is winning in the developer tools, and lower its specificity or change it.
2. Make your selector slightly more specific: .card .title instead of .title.
3. Reorder. Place the rule after the one you want to beat.
4. Use a class instead of an ID in the stronger rule so it is easy to beat.
5. Use CSS layers (@layer) to control the order of whole groups of rules. It is an advanced tool, but it solves specificity battles at the root.

When it is acceptable

• Utility classes meant to always win: .hidden { display: none !important; }.
• User preferences such as the reduced motion override.
• Overriding third-party CSS or inline styles you cannot edit.
• Print styles that must override everything.

In your own component styles, avoid it.