CSS Specificity Calculator
Paste one selector per line. This tool breaks each one down into IDs, classes/attributes/pseudo-classes, and elements/pseudo-elements, then ranks them so you can see which rule the browser will actually apply.
How to use it
- Paste the selectors you want to compare, one per line.
- Results update as you type, ranked from highest to lowest specificity.
- The breakdown shows exactly why one selector outranks another.
How it works
Each selector is scanned for IDs (#id), classes/attributes/pseudo-classes (.class, [attr], :hover), and elements/pseudo-elements (div, ::before). The three counts are compared left to right — any ID beats any number of classes, and any class beats any number of elements.
Limitations
This is a text-based approximation, not a full CSS parser. Deeply nested :not(), :is(), or :has() arguments, and selector lists inside those functions, may not be scored with full accuracy. For everyday selectors it matches the CSS specification's behavior.
Frequently asked questions
- How is CSS specificity calculated?
- As three counts: the number of IDs, the number of classes/attribute selectors/pseudo-classes, and the number of elements/pseudo-elements. A selector with more IDs always wins, regardless of how many classes or elements the other selector has.
- Does inline style count here?
- This tool only compares selectors you paste in, so it doesn't include inline style="" attributes, which outrank every selector-based rule except !important.
- What about !important?
- !important overrides normal specificity entirely and isn't part of the specificity calculation itself — it's a separate mechanism this tool doesn't model.
- Does it handle :not(), :is(), and :where() correctly?
- For simple, single-level cases it does — :where() contributes zero, and :not()/:is() take on the specificity of their argument. Deeply nested combinations may not be fully accurate; see the limitations below.