How is specificity calculated?

Specificity is calculated as a tuple (a,b,c,d) where: 'a' = inline styles (1000), 'b' = IDs (100), 'c' = classes, pseudo-classes, attributes (10), 'd' = elements, pseudo-elements (1). The !important flag overrides all.

What selectors are supported?

IDs (#id), classes (.class), elements (div), pseudo-classes (:hover, :nth-child), pseudo-elements (::before, ::after), attributes ([type='text']), combinators (>, +, ~, space), and :where(), :is(), :not(), :has()

Does :where() affect specificity?

No — :where() intentionally has zero specificity contribution. This calculator correctly handles this CSS feature, subtracting any specificity from pseudo-classes inside :where()

CSS Specificity Calculator - Free Online CSS Selector Priority Checker

Enter CSS Selectors

One CSS selector per line:

Specificity Scores

Click an example to try it:

div

.class

#id

div.class

#id.class

ul li:first-child

#header .nav a:hover

div > p + span.class

.wrapper .content ul li a

#main-content .card[data-type="primary"]

ul li:nth-child(odd)::before

:where(.class) div

How to Read Specificity

Specificity is calculated as a four-part score (a, b, c, d):

a (Inline) — Inline styles (style="..."). Score: 1000
b (IDs) — Each ID selector (#id). Score: 100
c (Classes) — Each class (.class), pseudo-class (:hover), attribute selector ([type]). Score: 10
d (Elements) — Each element (div) or pseudo-element (::before). Score: 1

The highest specificity wins. !important overrides all. :where() has zero specificity.

Frequently Asked Questions

What is CSS specificity?

CSS specificity is the algorithm browsers use to determine which CSS property value is applied when multiple conflicting declarations target the same element. The selector with the highest specificity score wins.

How is the specificity score calculated?

It uses a four-part tuple (inline, ID, class, element). Inline styles count as 1000. Each ID counts as 100. Each class, pseudo-class, or attribute counts as 10. Each element or pseudo-element counts as 1. A score of (0, 1, 2, 3) = 100 + 20 + 3 = 123 in total value.

Does :where() reduce specificity?

Yes — the :where() pseudo-class always contributes zero to specificity, regardless of what's inside its selector list. This is a CSS feature (Level 4) and this calculator correctly handles it.

What about !important?

!important declarations override all normal declarations, regardless of specificity. When multiple !important declarations apply, specificity determines which one wins. This calculator shows a warning for selectors that might be used with !important.

Does the order in the stylesheet matter?

Yes — when two selectors have equal specificity, the one that appears later in the stylesheet wins. This is the "cascade" part of CSS. This calculator only shows specificity; it doesn't track source order.