CSS Specificity and the Cascade: Why Your Style Isn't Applying

CSS picks a winner whenever two rules target the same element. The decision uses three things in order: importance, specificity, and source order. Get this straight and you'll stop sprinkling !important across your codebase.

The specificity score

Every selector gets a 3-part score (A, B, C):

• A — number of ID selectors
• B — number of class, attribute, and pseudo-class selectors
• C — number of element and pseudo-element selectors

#main .card h2     /* 1, 1, 1 */
.card .title       /* 0, 2, 0 */
h2                 /* 0, 0, 1 */
#main              /* 1, 0, 0 */

Higher A wins first, then higher B, then higher C. If everything ties, the rule that comes later in the stylesheet wins.

Inline styles and !important

• Inline style attributes beat any selector in a stylesheet
• !important beats everything except another !important higher in the chain
• Use !important only as a last resort — usually in user agents or override utilities

The cascade in plain English

1. Origin and importance — author > user > browser, !important flips the order
2. Specificity — higher score wins
3. Source order — last rule wins

Modern tools that change the game

@layer

@layer reset, base, components, utilities;
@layer components { .btn { background: blue; } }
@layer utilities { .bg-red { background: red; } }

Layers let you control the cascade explicitly — utilities can always beat components without bumping specificity.

:where() to keep specificity at zero

:where(article h2) { color: navy; } /* specificity 0,0,0 */

Common mistakes

• Using IDs in CSS (too specific to override)
• Long selector chains like .a .b .c .d
• Reaching for !important before reading the rule it conflicts with