“Why isn’t my CSS rule applying?” is almost always a specificity or source-order problem. The CSS Specificity Calculator breaks down any selector into its (inline, ID, class, element) weight so you can see exactly why one rule beats another.
What Is the CSS Specificity Calculator?
CSS Specificity Calculator is one of the tools in WebdevToolbox’s CSS category. It calculates and compares CSS selector specificity to debug cascade and override issues, following the specificity rules from the CSS Selectors specification.
How to Use It
- Open the tool at /tools/css-specificity-calculator.
- Paste one or more CSS selectors, one per line.
- The tool tokenizes each selector into IDs, classes/attributes/pseudo-classes, and elements/pseudo-elements.
- Results are automatically ranked from highest to lowest specificity.
- Compare two conflicting selectors side by side to see which one wins the cascade.
Key Features
- Full selector support — IDs, classes, attributes, pseudo-classes, and pseudo-elements are all scored correctly.
- :where() awareness — always scored as zero specificity, exactly as the spec defines.
- :not()/:is()/:has() handling — their arguments are unwrapped and scored so you can see the real impact of these functional pseudo-classes.
- Automatic ranking — paste as many selectors as you like and get them sorted by weight instantly.
When to Use the CSS Specificity Calculator
- Debugging a CSS override — find out why a more specific-looking selector isn’t winning.
- Code review — flag overly specific selectors (like deeply nested IDs) before they cause maintenance headaches.
- Refactoring to utility classes — check that a new class-based selector will actually override the old rule you’re replacing.
Try It Now
Open CSS Specificity Calculator directly from anywhere on the site using ⌘K and typing the tool name.
Part of the CSS collection on WebdevToolbox — free, browser-based developer tools with no login required.