CSS Specificity Calculator — Visualize Selector Weight
How Specificity Works
Specificity is expressed as (inline, id, class, element). Higher tuples win. Universal selector (*) and combinators (+, >, ~) add no specificity.
What This Tool Does
CSS Specificity Calculator — Visualize Selector Weight is built for deterministic developer and agent workflows.
Calculate and compare CSS selector specificity scores. Paste selectors to see (inline, id, class, element) tuples, a visual bar chart, and which selector wins. Free,.
Use How to Use for execution steps and FAQ for constraints, policies, and edge cases.
Last updated:
This tool is provided as-is for convenience. Output should be verified before use in any production or critical context.
Agent Invocation
Best Path For Builders
Dedicated API endpoint
Deterministic outputs, machine-safe contracts, and production-ready examples.
Dedicated API
https://aidevhub.io/api/css-specificity-calculator/ OpenAPI: https://aidevhub.io/api/openapi.yaml
Unified Runtime API
https://aidevhub.io/api/tools/run/?toolId=css-specificity-calculator&a=...
GET and POST are supported at /api/tools/run/ with identical validation and limits.
Limit: req / s, input max 128 KB.
How to Use CSS Specificity Calculator — Visualize Selector Weight
- 1
Paste your CSS selectors
Type or paste one selector per line into the input area. You can compare as many selectors as you need — the tool evaluates each one independently.
- 2
Read the specificity tuple
Each result shows the selector's specificity as (inline, id, class, element). Higher numbers in earlier positions always win — (0,1,0,0) beats (0,0,99,0).
- 3
Read the color-coded token breakdown
IDs appear in red, classes/attributes/pseudo-classes in green, and elements/pseudo-elements in blue. This shows exactly what's contributing to the score.
- 4
Sort by specificity to find the winner
Click 'Sort by specificity' to rank all selectors from highest to lowest. The winning selector is highlighted with a 'wins' badge.
- 5
Fix cascade conflicts
If a rule is unexpectedly overriding another, compare their specificity tuples. You may need to add an ID selector, or refactor to lower the winning rule's specificity rather than escalating.