CSS !important
Add !important at the end of a declaration and that declaration wins the cascade — beating every selector specificity, even inline styles. Use it sparingly.
The escape hatch
CSS
.alert { color: red !important; }
The cascade order, including importance
| Rank | What wins |
|---|---|
| 1 (highest) | User-agent !important rules. |
| 2 | User !important rules. |
| 3 | Author !important rules (your stylesheet). |
| 4 | Author rules (normal). |
| 5 | User rules (normal). |
| 6 (lowest) | User-agent rules. |
Why it's a code smell
- Once two rules use
!important, you're back to specificity battles — but harder to debug. - Hard to override in libraries or in design-system theming.
- Encourages "fix it with a bigger hammer" instead of restructuring selectors.
When it's actually OK
- Utility classes (
.hidden { display: none !important; }) where the intent is "this must apply". - Overriding third-party CSS you cannot edit.
- Print stylesheets that need to win every battle.
Tip: Before adding
!important, ask: can a slightly more specific selector solve this? Most of the time the answer is yes.Example
Example
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: Verdana, sans-serif; }
.box { background: #04AA6D; color: #fff; padding: 20px; border-radius: 6px; }
</style>
</head>
<body>
<h1>CSS !important</h1>
<div class="box">Edit the CSS on the left, then click Run »</div>
</body>
</html>
Try it Yourself »
Exercise
Make this utility class always hide its element, beating other rules.
.hidden { display: none
; }
Starts with an exclamation mark.
Discussion
Loading…