CSS Specificity Calculator
Enter CSS selectors to instantly calculate and compare their specificity scores. Understand which rule will win when multiple selectors target the same element. Supports modern CSS including :not(), :is(), :where(), :has(), and pseudo-elements.
How Specificity Works
- Count ID selectors — Each #id adds (1,0,0) to the score.
- Count class-level selectors — Each .class, [attribute], :pseudo-class adds (0,1,0).
- Count element-level selectors — Each element name and ::pseudo-element adds (0,0,1).
- Compare left to right — (1,0,0) beats (0,99,99). IDs always outweigh classes.
Frequently Asked Questions
What's the specificity of the universal selector (*)?+
Zero. The universal selector (*), combinators (+, >, ~), and the negation pseudo-class container itself contribute nothing to specificity.
What happens when two selectors have equal specificity?+
When specificity is equal, the rule that appears later in the CSS wins (source order). This is why the cascade matters — the order of your stylesheets and rules affects the outcome.
How do CSS layers (@layer) affect specificity?+
CSS Cascade Layers (@layer) create a new priority system above specificity. Rules in a later layer override earlier layers regardless of specificity. Within the same layer, normal specificity rules apply.
Built by Derek Giordano · Part of Ultimate Design Tools
Privacy Policy · Terms of Service