CSS Specificity Calculator
Score any CSS selector as an (a,b,c) triple.
How to use
- 1 Type or paste a single CSS selector into the input.
- 2 Read the (a,b,c) specificity triple shown below.
- 3 Inspect the per-column breakdown of IDs, classes and elements.
- 4 Compare two selectors by checking each one and comparing left to right.
About CSS Specificity Calculator
The CSS Specificity Calculator works out exactly how much weight a selector carries in the cascade and shows it as the standard (a, b, c) triple.
Specificity decides which competing rule wins when several target the same element, and getting it wrong is one of the most common sources of "why is my style not applying?" confusion.
This tool removes the guesswork: paste a selector and it instantly counts the three categories that matter — ID selectors, then class, attribute and pseudo-class selectors, then type (element) selectors and pseudo-elements.
It understands the details that trip people up.
Attribute selectors like [type="text"] count the same as a class, functional pseudo-classes such as :nth-child() count once, and pseudo-elements written either way (::before or the legacy :before) count as elements.
The universal selector and combinators (descendant, child, adjacent and sibling) correctly add nothing.
A quick comparison score (a×100 + b×10 + c) is also shown so you can eyeball which of two selectors will win, though the proper rule always compares the columns left to right.
Everything is calculated locally in your browser with no uploads, so it is fast, private and works offline.
Check one selector at a time — specificity is defined per selector, so split any comma-separated list first.
FAQ
What do a, b and c mean?
a counts ID selectors, b counts classes, attribute selectors and pseudo-classes, and c counts type (element) selectors and pseudo-elements. Higher columns win, compared left to right.
Does the universal selector add specificity?
No. The universal selector (*) and combinators such as >, + and ~ contribute zero to specificity.
Why does it reject comma-separated selectors?
Specificity is defined for one selector at a time. A selector list like "a, b" can have different specificities per part, so split it and check each separately.