01
Read A before B or C
Scores compare lexicographically: one ID beats any number of classes. Equal scores stay in their original input order when sorting.
CSS selector tools
CSS specificity calculator
Enter one selector per line. Comma-separated selectors become separate results; optional HTML matching stays off until you enable it.
CSS specificity calculator
One selector per line; top-level comma lists are split.
Enter a selector to begin.
Selectors and optional HTML stay in this browser. Parsing does not fetch external resources.
Options
Input changed; the previous result is out of date.
When two rules seem to fight, a CSS specificity calculator makes the ID, class and type columns visible before you edit the stylesheet. Compare CSS selectors without treating a large numeric score as a browser verdict.
Use this CSS selector specificity view to distinguish selector weight from whether a selector matches your markup. The CSS specificity checker also keeps invalid lines out of copied reports.
Why use this CSS specificity calculator
See where a score comes from
A selector such as :is(#dialog, .panel) inherits the highest argument weight, while :where(#dialog, .panel) contributes zero. This CSS specificity calculator names each contributing piece instead of leaving you to infer it from a total.
Keep matching separate from weight
A high-weight #missing selector may match nothing in the HTML fragment while a lower-weight .card does match. Inspect the two facts side by side; neither proves which CSS declaration eventually applies.
Read the score and check the context
02
Check functional pseudo-classes
Try :is() and :where() with the same arguments. :is() takes the highest argument score; :where() stays zero. :nth-child(... of S) adds its own class point.
03
Enable fragment matching only when useful
Paste an HTML fragment after enabling matching. Match counts describe that static fragment, not hover, focus, pseudo-element rendering or the full cascade.
What the comparison shows
A-B-C breakdown
Each selector gets separate ID, class/attribute/pseudo-class and type/pseudo-element counts, plus the pieces that supplied them.
Lists and stable ranking
A top-level comma list becomes separate candidates. Sort highest first or preserve input order; ties keep their original order.
Optional local matching
An inert HTML parse tree checks which nodes each selector finds. No pasted script runs and no image, stylesheet or URL is fetched.
What the score cannot decide
- Not a cascade winner
- Specificity compares competing declarations only after origin, importance and layer are considered. The tool has no property values or stylesheet order.
- Inline styles and !important sit outside A-B-C
- Neither an inline style attribute nor !important is another selector component. Adding them to one of the three columns would misstate the CSS algorithm.
- Each comma branch has its own weight
- A selector list has no single score. The branch that actually matches an element matters, so the calculator scores every top-level branch separately.
- Static HTML matching has limits
- A zero match count is not a zero specificity score. The inert fragment does not simulate hover or focus, render pseudo-elements, or load remote resources.
CSS specificity calculator questions
How is CSS specificity calculated?
Count IDs in A, classes, attributes and pseudo-classes in B, and elements and pseudo-elements in C. Compare the three counts from left to right.
Do :is(), :not(), :has(), and :where() affect specificity?
:is(), :not() and :has() use their most specific argument; :where() and its arguments add zero. The calculator shows this in each row.
Why do pseudo-elements count differently from pseudo-classes?
A pseudo-class such as :hover adds to B. A pseudo-element such as ::before adds to C; it is not an element in the optional HTML match list.
Does inline style or !important change specificity?
No. Inline styles and !important participate in other cascade steps. The reported A-B-C value belongs to selector text alone.
What happens when two selectors have the same specificity?
The scores tie. Within the same origin, layer and importance, later cascade criteria such as scope proximity and source order can decide; this page has no full stylesheet context.
Found a selector that scores incorrectly?
Try the CSS specificity calculator
Compare a few selectors, then add a local HTML fragment only if you need to check matching. The CSS specificity calculator keeps the two results distinct.