What !important does
Adding !important after a value makes that declaration win over every normal declaration for the same property on the same element. Selector specificity and source order no longer matter.
Without !important, the ID selector would win and the text would be blue. Delete !important in the editor to see it.
Syntax
selector {
property: value !important;
}
It goes after the value and before the semicolon. It applies to that one declaration only, not to the whole rule. It also works in shorthands (margin: 0 !important; makes all four sides important) and in a style attribute.
What beats what
For styles written by the page author, from weakest to strongest:
| Rank | Declaration | Example |
|---|---|---|
| 1 | Normal declaration in a stylesheet | p { color: blue; } |
| 2 | Normal declaration in a style attribute | <p style="color: blue"> |
| 3 | !important in a stylesheet | p { color: blue !important; } |
| 4 | !important in a style attribute | <p style="color: blue !important"> |
Inside one rank, specificity decides, then the order in which the declarations appear: the later one wins.
This is the one legitimate everyday use of !important: overriding an inline style you cannot edit, such as one written by a third-party widget.
When two declarations are both !important
!important against !important falls back to the usual rules: higher specificity wins, and on a tie the later declaration wins.
This is how !important escalates: once one rule uses it, the rule that must override it has to use it too, and specificity starts climbing again.
CSS specificity in one table
Specificity is the weight of a selector. Count three numbers:
| Column | What counts | Example selector | Specificity |
|---|---|---|---|
| A | ID selectors | #nav | (1,0,0) |
| B | Classes, attributes, pseudo-classes | .btn, [type="text"], :hover | (0,1,0) each |
| C | Type selectors, pseudo-elements | p, ::before | (0,0,1) each |
| none | *, combinators (>, +, ~, space) | *, ul > li | add nothing |
Compare column A first; only on a tie look at B, then C. So #nav a (1,0,1) beats .menu .item .link a (0,3,1): one ID outweighs any number of classes.
Understanding this table is what lets you avoid !important: most "my CSS is not applying" problems are a more specific rule elsewhere, visible in the DevTools Styles panel with your declaration struck through.
Cleaner alternatives
- Match the specificity, then rely on order. Load your stylesheet after the library's and use a selector at least as specific.
- Lower the other rule's specificity with
:where(). Everything inside:where()counts as zero, so base styles written with it are easy to override. - Use a CSS variable as the hook. A component that reads
var(--btn-bg)can be themed without fighting its selectors. See CSS variables.
Setting !important from JavaScript
element.style.color = 'red !important' does not work: the value is invalid and ignored. Use setProperty with a third argument:
el.style.setProperty('color', '#f59e0b', 'important');
Common mistakes
- Putting it in the wrong place.
color: !important red;is invalid; it goes after the value. - Using it in
@keyframes. Declarations marked!importantinside keyframes are ignored. - Fixing every conflict with it. Find the winning rule in DevTools and match or lower its specificity instead.
- Expecting it to affect a different property.
color: red !importantdoes nothing forbackground. - Forgetting that inline
!importantbeats yours. No rule in the page's stylesheets can overridestyle="color: red !important"; change the attribute itself, for example with JavaScript.
Frequently Asked Questions
What does !important do in CSS?
It gives one declaration priority over every normal declaration for the same property on the same element, regardless of selector specificity or order. Write it after the value: color: red !important;.
How do you override !important?
With another !important declaration that has a higher specificity, or the same specificity and a later position in the stylesheet. An inline style with !important beats every stylesheet !important.
Does !important override inline styles?
Yes. A stylesheet declaration with !important beats a normal declaration in a style attribute. It does not beat an inline declaration that is itself marked !important.
Is using !important bad practice?
Used to win a specificity fight, yes: the next override then needs !important too, and the stylesheet becomes hard to change. It is reasonable for utility classes that must always apply (like .hidden), for overriding third-party inline styles, and in user stylesheets.
How is CSS specificity calculated?
Count three columns: ID selectors, then classes, attributes and pseudo-classes, then type selectors and pseudo-elements. Compare column by column from the start, so #nav a (1,0,1) beats .menu .item a (0,2,1). The universal selector * and combinators add nothing.
