CSS Specificity Calculator — Understand Why Your Styles Aren't Applying

Our free CSS specificity calculator computes the specificity weight of any CSS selector and explains why one rule overrides another. The most common source of CSS debugging frustration is specificity conflicts — our tool makes the invisible calculation visible, helping you write cleaner, more predictable stylesheets.

How CSS Specificity is Calculated

CSS specificity is represented as three numbers (a, b, c) — sometimes written as a single number for comparison (a×100 + b×10 + c):

• a — ID selectors (#header, #nav) — highest specificity weight (100 points each)
• b — Class, attribute and pseudo-class selectors (.active, [type="text"], :hover) — medium weight (10 points each)
• c — Type selectors and pseudo-elements (div, p, h1, ::before, ::after) — lowest weight (1 point each)
• Universal selector (*) and combinators (+, ~, >, space) — zero specificity
• Inline styles — 1,0,0,0 — overrides all stylesheet rules
• !important — Overrides everything including inline styles — use sparingly

Specificity Examples

• p → (0,0,1) — type selector only
• .nav-item → (0,1,0) — one class
• div.container p → (0,1,2) — one class, two types
• #header .nav a:hover → (1,2,1) — one ID, one class, one pseudo-class, one type
• style="color:red" → (1,0,0,0) — inline style

CSS Specificity Best Practices

• Keep specificity as low as possible — use classes over IDs for styling
• Avoid !important — it creates a specificity arms race and makes debugging impossible
• Use CSS custom properties (variables) to override values without increasing specificity
• Follow a CSS methodology (BEM, CUBE CSS, Tailwind) to keep specificity consistently low and predictable
• If you must override a third-party library, match their specificity rather than adding !important