CSS Specificity Calculator
Score any CSS selector as an ID / class / type triple and rank a list of selectors to see which rule wins.
Scored live as you type, per the CSS Selectors Level 4 rules. Commas split a selector list into separate rows.
Type a selector above to see its specificity.
A ids · B classes, attributes, pseudo-classes · C types, pseudo-elements
How the three numbers are counted
- A ID selectors:
#main - B class selectors, attribute selectors and pseudo-classes:
.card,[href^="https"],:hover,:nth-child(2) - C type selectors and pseudo-elements:
div,::before,:first-line - 0 the universal selector
*, combinators (>,+,~, descendant space) and everything inside:where()add nothing - max
:is(),:not()and:has()take the specificity of their most specific argument, and are not themselves counted
The three numbers are compared left to right and never carry over: 0-1-0
beats 0-0-11. An inline style attribute outranks every
selector, and !important outranks that. When two selectors tie, the one
declared last in the stylesheet wins.
How it works
Paste one selector per line and this calculator parses each one and returns its
specificity as the familiar three-part value: A for ID selectors, B for classes,
attribute selectors and pseudo-classes, C for type selectors and pseudo-elements. The
parser follows section 17 of the CSS Selectors Level 4 specification, so it handles the
cases people usually get wrong: * and combinators count zero,
:where() always contributes zero no matter what is inside it, and
:is(), :not() and :has() take the specificity of
their single most specific argument while adding nothing of their own. Attribute
selectors with quoted values, namespaces such as svg|a, escapes,
:nth-child(2n of .row) and legacy one-colon pseudo-elements like
:before are all parsed too.
Every selector you enter is ranked, and the strongest is marked as the winner so you can
see at a glance which rule applies when two of them target the same element. Remember
that the three numbers are compared left to right and never carry: a single class beats
any number of type selectors. Specificity is only one step of the cascade, so an inline
style attribute still outranks any selector and !important
outranks that. Everything runs in your browser with no upload and no signup, so pasting
selectors from a private codebase is safe.
Frequently asked questions
How is CSS specificity calculated?
Every selector gets three numbers. A counts ID selectors such as #main, B counts classes, attribute selectors and pseudo-classes such as .card, [href], :hover and :nth-child(2), and C counts type selectors and pseudo-elements such as div and ::before. The universal selector * and the combinators >, + and ~ add nothing. The three numbers are compared left to right and never carry over, so 0-1-0 beats 0-0-11: one class outranks any number of element selectors.
Do :is(), :not(), :has() and :where() affect specificity?
Yes, and they behave differently. :is(), :not() and :has() add nothing themselves but take the specificity of their most specific argument, so :is(.bar, #baz) is worth one ID. :where() is the exception: it always contributes zero no matter what is inside it, which is what makes it useful for low-specificity defaults that are easy to override. This calculator implements the rules from section 17 of the CSS Selectors Level 4 specification.
What beats a high specificity score?
Specificity is only one step in the cascade. An inline style attribute outranks any selector in a stylesheet, and an !important declaration outranks that. Layer order, origin and the order of declarations all come first in the cascade too. When two selectors have exactly the same specificity, the one declared later in the stylesheet wins, which is why this tool tells you when your selectors tie.