CSS Specificity Calculator
Calculate CSS selector specificity components and weighted numerical scores to resolve style conflicts.
Run tool
Understanding how browsers resolve competing stylesheet rules helps prevent unexpected styling overrides in web layouts. This online CSS Specificity Calculator analyzes your selector strings to break down their specificity values into clear numerical components and a total weighted score. The tool inspects your input for ID selectors, class names, attribute selectors, pseudo-classes, type selectors, and pseudo-elements. ID selectors carry the highest weight in the calculation, followed by classes, attributes, and pseudo-classes, with element types and pseudo-elements contributing to the base component. The universal selector does not add to the specificity score. If you submit a blank field or whitespace, the tool returns zero across all specificity tiers. You can use this calculator while debugging complex style sheets, refactoring legacy CSS rules, or verifying that a utility class properly overrides an existing component selector without resorting to excessive style declarations. Enter any valid CSS selector into the input field to inspect its detailed breakdown instantly.
Instructions
- Enter a CSS selector string into the Selector input field, such as a class, ID, element, or compound selector.
- Leave the input field empty if you want to inspect baseline zero specificity.
- Click the Run button to evaluate the selector.
- Review the four specificity components and the combined numerical score in the results area.
Examples
- Input `#header .nav-item:hover` calculates specificity components for one ID, two class or pseudo-class items, and zero element tags.
- Input `div.container > p` calculates specificity components for zero IDs, one class name, and two element type selectors.
FAQ
How does the calculator weight different CSS selector components?
The tool calculates specificity using four components weighted in descending order: IDs have the highest weight (1000), followed by classes, attributes, and pseudo-classes (100), then element types and pseudo-elements (10), plus a base tier (1).
Does the universal selector increase specificity?
No, the universal selector does not add to any specificity component and has an effective count of zero.
What happens if I submit an empty input?
When the selector field is blank or contains only whitespace, the calculator outputs zeroes for all four specificity components and an overall score of zero.