CSS !important

Picture a office memo system where every note gets ranked by seniority, except one red stamp that says URGENT -- OVERRIDE EVERYTHING. That stamp jumps to the top no matter who wrote the original memo. !important is that red stamp in CSS: it lets one declaration override the normal specificity ranking, for better or worse.

In this page:

What !important Does
How It Interacts With Specificity
Why Overusing It Is a Problem
Legitimate Use Cases
Alternatives to Avoid Needing It

What !important Does

Appending !important to a declaration makes it override any other declaration for that property on that element, regardless of the normal specificity calculation. It doesn't change specificity itself -- it creates a separate, higher-priority tier that beats specificity entirely.

Example: What !important Does

css

<style>
p {
  color: blue;
}
.text {
  color: red !important;
}
</style>
<p class="text">Wins over any normal-priority rule regardless of specificity</p>

How It Interacts With Specificity

When two declarations both use !important, the normal specificity rules apply again just between those two -- !important only lifts a rule into a higher tier, it doesn't eliminate specificity comparisons within that tier. Two !important rules of different specificity still resolve by specificity as usual.

Example: How It Interacts With Specificity

css

<style>
.text {
  color: red !important;
}
#unique {
  color: green !important;
}
</style>
<p id="unique" class="text">Both !important, so specificity decides between them: green</p>

Why Overusing It Is a Problem

Once a codebase has several !important declarations fighting each other, the only way to override one is to add another !important with higher specificity, creating an arms race that makes styles hard to predict or maintain. It effectively breaks the cascade's intended, readable override system.

Example: Why Overusing It Is a Problem

css

.a { color: red !important; }
.b { color: blue !important; }

Legitimate Use Cases

!important is defensible in narrow situations: overriding third-party or inline styles you can't otherwise edit, utility classes explicitly designed to always win (like a .hidden { display: none !important; } helper), or user-stylesheet accessibility overrides. The key is using it deliberately and sparingly, not as a first resort.

Example: Legitimate Use Cases

css

.hidden {
  display: none !important;
}

Alternatives to Avoid Needing It

Most !important usage can be avoided by writing more specific selectors deliberately, reorganizing stylesheet load order, or using CSS layers (@layer) to control precedence explicitly instead of fighting specificity with brute force. Reaching for better selector structure keeps the cascade predictable.

Example: Alternatives to Avoid Needing It

css

@layer base, utilities;

@layer utilities {
  .hidden { display: none; }
}

🔒

Chapter Quiz — Complete all 22 topics to unlock

0/22 topics done

Complete these topics first:

← Previous Lesson CSS Variables Next Lesson → CSS Box Sizing