Developer tools
CSS Specificity Calculator
Calculate CSS selector specificity locally in your browser.
Compare selectors using the CSS specificity tuple: inline styles, IDs, classes/pseudo-classes/attributes, and elements/pseudo-elements.
Compare selectors before source order decides the cascade.
Enter one selector or a comma-separated selector list to see its specificity tuple: inline styles, IDs, classes/pseudo-classes/attributes, and elements/pseudo-elements. The calculator supports common selector syntax including :is(), :not(), :has(), :where(), and :nth-child(... of ...). It is a practical selector parser rather than a complete CSS validator, so check complex or browser-specific syntax against your stylesheet. Everything runs locally in your browser; selectors are not uploaded or stored.
Frequently Asked Questions
Everything you need to know about this tool, how it works, and privacy.
How do specificity and source order work together?
When competing declarations have the same origin, importance, and cascade layer, the selector with the higher specificity wins. If their specificity is equal, the declaration that appears later in the source order wins. Specificity does not override !important, origin, layer, or other cascade rules.
Which selectors does this calculator support, and what are its limits?
It handles common type, class, ID, attribute, pseudo-class, pseudo-element, combinator, namespace, and comma-separated selectors, including :is(), :not(), :has(), :where(), and :nth-child(... of ...). It is a practical parser, not a complete CSS validator, so verify unusual, browser-specific, or newly introduced selector syntax in the browser and CSS specifications you target.
Do my CSS selectors stay private?
Yes. The specificity calculation runs entirely in your browser. CodeASystem does not upload or store selectors you enter.