Loading
Loading
Debug your styles like a pro. Calculate and sort complex CSS selector scores to see exactly which rules win in the browser engine.
Selectors are automatically sorted from strongest to weakest
Your CSS is not broken. Your specificity is.
Every developer has stared at a style that refuses to apply, cycled through !important hacks, and still lost hours to a specificity conflict they could not see. The Toolenda CSS Specificity Calculator eliminates that guesswork entirely, by running the exact same selector evaluation logic a real browser engine uses, and showing you the result as a visual, color-coded power hierarchy.
Most specificity calculators were built when CSS looked like this: div.class#id. Modern CSS looks like this: article:has(> h2:not(.skip)):where(.featured). Legacy tools break on that syntax, or silently return wrong numbers.
specificity npm package, the same engine used in professional-grade CSS tooling. It handles modern functional pseudo-classes including :is(), :has(), :not(), and :where() with 100% specification accuracy.| Selector Type | Score | Examples |
|---|---|---|
| Universal selector | (0, 0, 0) | * |
| Element / pseudo-element | (0, 0, 1) | div, ::before |
| Class / Attribute / Pseudo-class | (0, 1, 0) | .card, [type="text"], :hover |
| :where() function | (0, 0, 0) | :where(.class) |
| ID selector | (1, 0, 0) | #header |
| Inline style | Overrides all | style="..." |
| !important | Overrides inline | Use as last resort only |
An inline style always beats any class, ID, or element selector. The inline style score is treated as a fourth column, completely separate from and always above the standard three-column score. Every time. Without exception. Unless you add !important to the class rule.
An ID selector always outweighs any number of class selectors. Ten classes stacked together (0, 10, 0) still score zero in the ID column. This is why heavy reliance on ID selectors creates brittle CSS: they are extremely difficult to override.
CSS :where() always has a specificity of zero, regardless of what selectors are placed inside it. This makes it an architectural tool, letting you write default styles that are intentionally easy to override. Unlike :is() or :has() which take the specificity of their most specific argument, :where() contributes exactly (0, 0, 0).
CSS specificity is the algorithm browsers use to decide which style rule applies to an element when multiple rules target the same property. Each selector is assigned a three-column score based on IDs, classes, and elements. The rule with the highest score wins.
Count three categories in your selector separately: ID selectors (1-0-0), classes/attributes/pseudo-classes (0-1-0), and elements/pseudo-elements (0-0-1). Compare scores column by column from left to right.
Among standard selectors, ID selectors (#id) have the highest specificity score of (1, 0, 0). Inline styles (style="") rank even higher and override them. The !important declaration bypasses the entire system.
The :where() pseudo-class is intentionally defined by the CSS Selectors Level 4 specification to always produce a specificity score of zero, regardless of the selectors inside it. This makes it a precision tool for writing base styles that are easy to override.
You can add an ID to the selector (adds 1,0,0), add more class or attribute selectors (chaining .card.card doubles the class weight), use a more specific selector chain, or restructure the cascade so the rule appears later in the stylesheet.