Debug & Review · LOCAL TOOL
CSS Specificity Bench
Compare selector specificity as an ID, class-like, and type-like tuple, including special behavior of :where() and selector-list pseudos.
No API call
Your input
LOCALResult
Run the tool to see a result.
Your result will appear here. Input is not saved.
WHY THIS TOOL EXISTS
A focused job, not a black box.
The explanation shows the tuple rather than collapsing it into a misleading decimal score. This makes ties and cascade-layer limits easier to discuss.
How to use it
- Enter one or more selectors.
- Run the specificity calculation.
- Compare tuples, then inspect cascade origin, importance, and layers separately.
TRY A WORKING EXAMPLE
Start with known input.
Load this sample into the workspace, run the tool, and compare the result shown below.
Show sample input
{
"selectors": "#app .card button::before, :where(#app) .card button, :is(.wide, #featured) a, article:has(> img.cover)"
}Expected sample result from the local tool
4 selector(s) reviewed · tuple order is ID, class-like, type-like.
#app .card button::before (1, 1, 2)
:where(#app) .card button (0, 1, 1)
:is(.wide, #featured) a (1, 0, 1)
article:has(> img.cover) (0, 1, 2)Specificity alone does not determine the cascade; origin, importance, layers, scope, and source order also matter.
LIMITS AND INTERPRETATION
What the result cannot tell you.
The calculator covers common selector syntax. Escaped identifiers and unusual nested selector grammar may need review in a standards-aware CSS parser.
Inputs are processed in this page and are not written to local storage.