CSS Specificity Calculator
Enter a CSS selector to see its specificity broken down into IDs, classes/attributes/pseudo-classes, and elements/pseudo-elements. Compare two selectors to see which one wins. Supports :not(), :is(), :has(), :where(), and attribute selectors. Runs in your browser.
Estimate and compare CSS selector specificity as an ID, class/attribute/pseudo-class, and element/pseudo-element tuple.
How to calculate CSS specificity
- Enter one selector and calculate its specificity tuple.
- Or enter selector A and selector B in comparison mode.
- Compare the tuples from left to right to see which selector wins.
How this calculator works
The tool uses a simplified parser, not a full CSS parser. It counts IDs, classes/attributes/pseudo-classes, and elements/pseudo-elements.
The :where() function is removed as zero specificity. Contents of :not(), :is(), and :has() are flattened and counted, so complex selector-list cases can differ from the CSS specification, which uses the highest-specificity argument.
Privacy and limitations
All selector analysis runs locally in your browser. Treat the result as a practical estimate for ordinary selectors, not an authoritative parser for every modern CSS selector edge case.
CSS specificity FAQ
What does (1,2,3) mean?
It means one ID, two class/attribute/pseudo-class contributions, and three element/pseudo-element contributions.
Does :where() add specificity?
This tool counts :where() as zero.
Are :is(), :not(), and :has() fully spec-accurate?
No. Their contents are flattened by this simplified implementation, so complex lists can be over-counted.
Does source order affect this score?
No. This tool only compares specificity tuples, not cascade order or importance.
Does it parse my stylesheet?
No. It analyzes only the selector text you enter.