CSS Specificity Calculator
Free online CSS specificity calculator. Paste one or two selectors to see their (a, b, c) weight, which one wins, and exactly why your style is not applying.
CSS Specificity Calculator
Free online CSS specificity calculator. Paste one or two selectors to see their (a, b, c) weight, which one wins, and exactly why your style is not applying.
About CSS specificity
What specificity decides
When two CSS rules target the same element and set the same property, the browser needs a tiebreaker: specificity. Each selector gets a weight written as three numbers, a, b, c. Compare them left to right; the higher wins. Only when they are exactly equal does source order (or !important) decide. This is why a more specific rule can quietly override the one you just wrote.
The three columns
Column a counts ID selectors, column b counts classes, attributes, and pseudo-classes, and column c counts element types and pseudo-elements. The universal selector, combinators, and :where() add nothing. :is(), :not(), and :has() contribute the specificity of their most specific argument. This tool colors each token so you can see which column it feeds.
FAQ
Common questions and answers about this topic.
Why is my CSS not being applied?
Usually another rule targeting the same element has higher specificity, so it wins even if yours comes later. Paste both selectors here and compare the (a, b, c) weights to see which column decides it.
Why do :where() and * count as zero?
:where() is designed to add zero specificity so its contents are easy to override. The universal selector * and combinators also add nothing. In contrast :is() and :not() take the specificity of their most specific argument.
Are my selectors sent to a server?
No. All parsing and comparison run entirely in your browser, and nothing you type leaves your device.