CSS Specificity Calculator
Calculate the specificity of a CSS selector, to understand which rule wins.
Why one rule beats another
When two CSS rules target the same element, specificity decides which one wins, and it is the source of endless confusion — why does my style not apply even though it is right there? This calculates a selector's specificity, scoring it by the IDs, classes and elements it contains, so you can see exactly how much weight a rule carries in that contest.
Enter a selector and its specificity is scored and explained.
The hierarchy that decides
Specificity works as a ranking: inline styles beat IDs, IDs beat classes and attributes, classes beat element selectors. A more specific selector wins regardless of order in the file, which is why adding another class sometimes fixes a stubborn style and sometimes does not. The common trap is an over-specific selector or a stray ID making a rule impossible to override cleanly. Understanding a selector's score is how you write styles that win predictably instead of reaching for the blunt instrument of important.
Common questions
What determines CSS specificity?
A ranking: inline styles beat IDs, IDs beat classes and attributes, and classes beat element selectors, regardless of order in the file.
Why won't my CSS rule apply?
A more specific selector is likely overriding it. Checking specificity shows which rule wins and why.
Is anything uploaded?
No. The calculation happens in your browser.