How is CSS specificity calculated?

Specificity is a three-part tuple (a, b, c). Count ID selectors into a, classes / attribute selectors / pseudo-classes into b, and type selectors / pseudo-elements into c. The universal selector adds nothing. The tuples are compared left to right, so any number of classes can never beat a single ID.

What is the specificity of :is(), :not() and :where()?

:is(), :not() and :has() take the specificity of their most specific argument, while the pseudo-class wrapper itself adds nothing. :where() is special — it always contributes zero specificity, which makes it ideal for low-priority defaults you want to override easily.

What is the difference between a descendant and a child combinator?

A space (descendant, like nav a) matches a target at any depth inside the ancestor. A greater-than sign (child, like ul > li) matches only direct children. Child combinators are stricter and often faster because the browser stops searching after one level.

Do attribute selectors count as classes for specificity?

Yes. An attribute selector like [type="text"] carries the same weight as a class, contributing to the b component of the specificity tuple. The case-insensitive i flag does not change its weight.

How do inline styles and !important fit in?

Inline style attributes outrank any selector-based rule, and !important declarations sit above both, in their own layer of the cascade. Specificity only decides between competing selectors of the same importance and origin.

CSS Selectors Reference

This is a searchable reference for CSS selectors plus a live specificity calculator. It lists the simple selectors (type, class, ID, universal), the full set of attribute selectors and their matching operators, pseudo-classes and pseudo-elements, the combinators that join them, and the functional grouping selectors :is(), :where(), :not() and :has() — each annotated with the specificity it carries.

How it works

A selector is built from simple selectors (a tag name, .class, #id, [attr] or pseudo) joined by combinators (a space for descendant, > for child, + for next-sibling, ~ for subsequent-sibling). The browser reads compound selectors right to left, starting from the rightmost key selector and walking up the tree. When two rules target the same property on the same element, specificity breaks the tie. Specificity is a tuple (a, b, c): a counts ID selectors, b counts classes, attribute selectors and pseudo-classes, and c counts type selectors and pseudo-elements. The tuples compare left to right, so one ID always beats any number of classes. The calculator in this tool implements that algorithm — including the special cases where :is(), :not() and :has() adopt their most specific argument and :where() contributes nothing.

Tips and gotchas

The case-insensitive i flag on attribute selectors ([type="text" i]) does not change specificity. Prefer :where() for resets and framework defaults so app code can override them with a single class. Remember that the cascade considers origin and importance before specificity — a !important author rule beats a normal one regardless of selector weight, and inline style attributes sit at the top of the non-important author tier.

Example

/* a=1, b=1, c=2  ->  specificity 1,1,2 */
#main ul li.active { color: crimson; }

/* a=0, b=0, c=0  ->  easy to override */
:where(button) { all: unset; }

Paste any selector into the calculator above to see the breakdown. Everything runs in your browser; nothing you type is uploaded.

CSS Selectors Reference

Email me this result

How it works

Tips and gotchas

Example