CSS Specificity Calculator
Calculate CSS selector specificity, inspect contribution explanations and sort comma-separated selectors. Supports modern is, where, has, not and nth-child of-list rules.
Settings
Try the example or enter your own settings.
A larger tuple does not guarantee a rule wins. Matching, !important, origin, cascade layers, scope and source order also matter. This tool never applies supplied selectors to the page. Expand nesting (&) first; shadow host selectors and functional pseudo-elements are outside this version. Parser acceptance is not browser-support validation.
Using CSS Specificity Calculator
Calculate CSS selector specificity, inspect contribution explanations and sort comma-separated selectors. Supports modern is, where, has, not and nth-child of-list rules.
- Paste comma-separated selectors, or try the included example. Enter selectors only, without braces or declarations.
- Choose original order or specificity sorting and detailed or compact JSON. Calculate to compare ID, class and type weights separately.
- Read contribution explanations, copy/export JSON or CSV, and check the actual cascade in browser developer tools.
Example
Try the included editable example. Choose original order or specificity sorting and detailed or compact JSON. Calculate to compare ID, class and type weights separately.
Questions & answers
What do the three numbers mean?
The tuple counts IDs, then classes/attributes/pseudo-classes, then types/pseudo-elements. Compare from left to right; it is not a decimal score.
How do is, not and has affect specificity?
Their weight is replaced by their most specific selector argument. Combinators do not add weight. Repeated selectors still contribute separately.
Why does where have zero weight?
The where pseudo-class and all of its arguments contribute zero specificity, so it can restrict matching without increasing selector weight.
How does nth-child with of work?
The nth-child or nth-last-child pseudo-class adds one class-level weight plus the most specific selector in its optional of list.
Will it tell me which CSS rule wins?
It compares specificity only. Rules must match the same element, and origin, importance, layers, scope proximity and source order also affect the cascade. Inline styles are not selectors and are outside this input.
What syntax and limits are supported?
Use up to 20,000 characters, 200 comma-separated selectors, 5,000 parser nodes and 32 nesting levels. Common simple selectors, logical functions, nth functions and basic pseudo-elements are supported. CSS nesting, shadow host selectors, functional pseudo-elements and unknown functional pseudo-classes are rejected. No browser support or full stylesheet validation is performed.
Related tools
A useful next step for your task.
Developer & DataCSS Minifier & BeautifierMinify, beautify and check CSS syntax locally with parser-based processing, license comment controls, accurate rule statistics and CSS exports.
Images & DesignCSS Filter PlaygroundBuild reusable CSS filters with live image comparison, adjustable presets, filter ordering, local image previews and CSS or JSON settings exports.
Developer & DataCSS Grid Layout GeneratorCreate equal-column, sidebar and auto-fit card layouts with a responsive preview. Copy CSS, download a working HTML demo and save reusable grid…
Developer & DataJSON Formatter & ValidatorHighly recommendedInstantly format, minify, and validate your JSON code. Features include live preview, syntax highlighting, tree viewer, and structure stats.
Help improve this tool
Report a problem or suggest an improvement
Describe the issue without pasting private tool input. Feedback goes to our admin inbox.