CSS specificity calculator
Paste one selector per line. Each gets an (a, b, c) specificity score and a ranked list showing which selector would win in a conflict.
Selectors
Results
Paste at least one selector.
- IDs (a)
- Classes, attributes, pseudo-classes (b)
- Elements and pseudo-elements (c)
Universal selector — specificity (0, 0, 0).
Specificity is compared left to right: IDs, then classes/attributes/pseudo-classes, then elements/pseudo-elements. Inline styles and !important are not part of selector specificity.
About this tool
When two rules target the same element, the one with higher specificity wins (unless cascade order or !important overrides it). This tool parses your selectors and returns the classic (a, b, c) triple.
Handled— IDs, classes, attributes, type selectors, pseudo-classes, pseudo-elements,:not(), :is(),:has() (max of arguments), and :where() (zero contribution).
Limitations— Does not evaluate inline styles, !important, source order, or the :lang() /:dir() argument forms in full. Escaped identifiers, shadow-piercing combinators, and deeply nested selector lists inside uncommon pseudo-functions may be approximate. When in doubt, check DevTools.
Read more
- CSS specificity — how the cascade picks a winner
- The CSS cascade — layers, origin, and importance
- CSS selectors — every way to target an element
- CSS pseudo-elements — ::before, ::after, and friends