CSS Specificity Calculator
Calculate selector specificity scores in your browser.
Score selector specificity
When two CSS rules fight, specificity decides the winner — and misjudging it is why a style “won’t apply.” This calculator scores any selector’s specificity so you can see exactly how strong it is and why one rule overrides another.
Understanding the score (IDs, classes, elements) turns specificity wars from guesswork into something you can reason about. Paste a selector, read its score, and compare two selectors to know which will win before you touch the CSS.
Reading the score
Specificity counts IDs first, then classes and attributes, then elements, so a single ID outranks any number of classes. The score is computed in your browser.
Frequently asked questions
How is the score written?
As IDs-classes-elements. #app .card:hover > h2::before scores 1-2-2: one ID, one class and one pseudo-class, and one element plus one pseudo-element.
Which selector wins when two conflict?
Compare the three numbers from left to right. One ID (1-0-0) beats any number of classes (0-10-0). If the scores tie, the rule that appears later in the CSS wins.
Does it handle :is(), :not(), and :where()?
Only roughly. It counts them like regular pseudo-classes, but in CSS :where() adds zero and :is() and :not() take the specificity of their most specific argument, so check those by hand.
Related tools
Practical utilities for front-end design and implementation work.