CSS Selector Specificity Calculator
Calculate ID, class and type specificity vectors for selectors, including modern functional pseudo-classes.
Your input is sent to this site only after you choose Convert on server. The conversion runs for this request and no history is saved. Upload up to 4 MiB combined; Office files have a 2 MiB limit.
Enter your text
Edit the example text or paste your own content.
How to use CSS Selector Specificity Calculator
- Load the example or paste your own input.
- Review the settings, then select Convert on server to send input for processing.
- Review the result, then copy or download it.
What this tool helps you do
Inspect the specificity contribution of CSS selectors when debugging why one style competes with another. Enter one selector per line and compare the three-part vector for ID selectors, class-like selectors and type-like selectors. Modern functional pseudo-classes are handled by the selector parser, including the zero specificity of where and the argument behavior of is and has.
Format rules and limitations
This is a selector calculation rather than a complete cascade simulator. Origin, importance, cascade layers, scope, inheritance and source order can still decide which declaration wins. Supply one complex selector on each line rather than a top-level comma-separated list. Unsupported or malformed syntax is rejected. Values are reported as separate components, not a decimal score where ten classes would incorrectly carry into the ID component.
Example input
#app .card > a:hover :where(#app) .card :is(#app, .card) a
What should I check before relying on the output?
This is a selector calculation rather than a complete cascade simulator.
Is input uploaded?
This tool sends input to this site’s conversion API after you select Convert on server. Files use bounded workers and, when needed, private temporary folders deleted after processing or cancellation. No conversion history is saved. The converter does not upload files to a third-party conversion service.