What causes "CSS rule not applying despite being correct"?

A more specific selector elsewhere is overriding your rule An inline style is overriding your stylesheet The rule is being overridden by a later rule with equal specificity A CSS framework (Tailwind, Bootstrap) has higher specificity

CSS Error3 Fixes Available

CSS styles not applying — specificity issue

CSS rule not applying despite being correct

What does this error mean?

CSS specificity determines which rule wins when multiple rules target the same element. If your styles aren't applying, a more specific rule elsewhere is overriding them. The order of specificity is: inline styles > IDs > classes/attributes > elements.

Common Causes

A more specific selector elsewhere is overriding your rule
An inline style is overriding your stylesheet
The rule is being overridden by a later rule with equal specificity
A CSS framework (Tailwind, Bootstrap) has higher specificity

How to Fix It (3 Solutions)

Use browser DevTools to inspect

In DevTools → Elements → Styles, you can see which rules are applied and which are crossed out (overridden).

Increase specificity without !important

Add a parent selector to increase specificity instead of using !important.

Code

/* ❌ Avoid !important */
.button { color: red !important; }

/* ✅ Increase specificity instead */
.container .button { color: red; }

Use our CSS Formatter

Format and review your CSS to spot conflicting rules more easily.

Fix this error faster with our free tool

CSS Formatter

Open CSS Formatter

Related Errors

CSS

CSS styles not applying — specificity conflict

View fix

CSS

Flexbox not centering / flex properties not working

View fix

CSS

Tailwind CSS styles are not applying to my elements

View fix

Browse all error fixes