CSS Specificity Calculator
Free online CSS specificity calculator. Enter one or two selectors to break down their (a, b, c) weights and compare specificity. The result does not determine which style applies on a page.
CSS Specificity Calculator
Free online CSS specificity calculator. Enter one or two selectors to break down their (a, b, c) weights and compare specificity. The result does not determine which style applies on a page.
About CSS specificity
What specificity decides
Specificity is one step in the CSS cascade. For declarations affecting the same element and property, origin, importance (!important), and cascade layer take precedence. Only when these and other higher-priority conditions tie do selector weights matter. Compare (a, b, c) from left to right. Equal weights may still require scoping proximity to be compared before source order.
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.
What this comparison covers
Enter one valid selector in each field. The tool does not check DOM matches, declaration !important, inline styles, or layers, so it cannot determine the applied style. For a comma-separated selector list, it reports the highest weight in the list, not the weight of the selector matching an element. Invalid input may display (0, 0, 0); that does not establish a valid zero-specificity selector.
FAQ
Common questions and answers about this topic.
Why is my CSS not being applied?
Specificity is only one possible cause. In browser developer tools, check whether the selector matches the element, the declaration is valid, and conditions such as media queries are met. Then inspect the cascade, including !important, layers, and inline styles. This calculator compares selector weights; it does not inspect your page or determine its applied styles.
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?
The tool parses and compares selectors locally in your browser, without sending them to a server for calculation.
Do !important and layers change (a, b, c)?
No. They affect cascade precedence without adding to selector specificity. A larger (a, b, c) therefore does not guarantee that a declaration wins. For declarations in author stylesheets, later layers have priority for normal declarations, while earlier layers have priority for important declarations; normal unlayered declarations outrank layered ones, and important declarations reverse that order.