Built and fact-checked by the DocNectar team — see our editorial standards
Key Features
Instant Calculation
Get accurate results in real time with our optimized algorithm.
Mobile Friendly
Fully responsive design. Works on all devices & screen sizes.
Privacy Focused
Your data stays on your device. We don't store any inputs.
100% Free
No hidden costs. This tool is completely free forever.
When two CSS rules target the same element with conflicting styles, specificity decides which one wins — and it's calculated as a three-part tuple, not a single number, which is a common source of confusion.
This calculator breaks down any CSS selector's specificity into its ID, class/attribute/pseudo-class, and element/pseudo-element counts.
How it works
Enter a CSS selector. The calculator counts ID selectors (#id), class/attribute/pseudo-class selectors (.class, [attr], :hover), and element/pseudo-element selectors (div, ::before), reporting the result as an (id, class, element) specificity tuple.
- Enter cSS selector.
- Click Calculate to see your results.
Examples
A nested selector with a hover state
The selector "#nav ul li.active > a:hover" has a specificity of 1-2-3: one ID (#nav), two class/pseudo-class selectors (.active and :hover), and three element selectors (ul, li, a).
Who should use it
- Debugging why a CSS rule isn't being applied as expected due to a more specific conflicting rule.
- Understanding and comparing selector specificity while learning CSS.
Industry applications
- Front-end web development
- CSS architecture and style guide development
Advantages
- Reports specificity as the standard (id, class, element) tuple rather than a potentially misleading single number.
- Handles combinators, attribute selectors, and pseudo-classes/elements.
Limitations
- Doesn't account for inline styles or !important, which override specificity-based rules entirely.
Common mistakes to avoid
- Comparing specificity as a single combined number instead of comparing the tuple left-to-right (ID, then class, then element).
- Forgetting that inline styles and !important override normal specificity entirely, regardless of the selector used.
Best practices
- When debugging why a style isn't applying, compare the competing selectors' specificity tuples left-to-right rather than guessing based on selector length.
Tips
- If you find yourself needing increasingly specific selectors (or resorting to !important) to override styles, it's often a sign to restructure your CSS architecture rather than escalate the specificity war.