What is CSS specificity?

CSS specificity is the algorithm browsers use to determine which CSS rule applies when multiple rules target the same element. It is calculated based on the types of selectors used. Specificity is expressed as a tuple (a, b, c) where 'a' counts ID selectors, 'b' counts class selectors, attribute selectors, and pseudo-classes, and 'c' counts type selectors and pseudo-elements. A selector with higher specificity overrides one with lower specificity, regardless of source order.

How is CSS specificity calculated?

CSS specificity is calculated by counting the number of each selector type. Each ID selector (#id) adds 1 to column 'a'. Each class selector (.class), attribute selector ([attr]), or pseudo-class (:hover, :focus) adds 1 to column 'b'. Each type selector (div, p, h1) or pseudo-element (::before, ::after) adds 1 to column 'c'. The universal selector (*), combinators (+, >, ~), and :where() have zero specificity. Inline styles have the highest specificity of (1,0,0,0), and !important overrides all specificity rules.

What has higher specificity: a class or an ID?

An ID selector always has higher specificity than any number of class selectors. A single ID selector (#nav) has specificity (1, 0, 0), while even ten class selectors (.a.b.c.d.e.f.g.h.i.j) have specificity (0, 10, 0). Since specificity is compared column by column from left to right, the ID column (a) is evaluated before the class column (b), making IDs always win over classes.

Does !important override specificity?

Yes, !important overrides all normal specificity calculations. A declaration with !important will win over any selector regardless of how specific it is. However, if two declarations both have !important, then normal specificity rules apply between them. Using !important is generally discouraged because it makes CSS harder to maintain and debug. It is better to use more specific selectors or restructure your CSS instead.

How do :not(), :is(), and :has() affect specificity?

The :not(), :is(), and :has() pseudo-classes themselves do not add to specificity. Instead, they take on the specificity of their most specific argument. For example, :not(.active) has the same specificity as .active (0, 1, 0), and :is(#main, .sidebar) has the specificity of #main (1, 0, 0) because that is the most specific argument. In contrast, :where() always has zero specificity regardless of its arguments, making it useful for creating low-specificity utility styles.

CSS Specificity Calculator

Calculate and compare CSS selector specificity. Enter one or more selectors to see their specificity in (a, b, c) format, visualize the weight breakdown, and find which selector wins. Everything runs in your browser.

Specificity Weight Guide

Inline Styles (1,0,0,0) Applied via the style="" attribute. Highest specificity, overrides all selectors.

ID Selectors #header, #main, #nav — each adds 1 to column a

Classes, Attributes, Pseudo-classes .active, [type="text"], :hover, :nth-child(2) — each adds 1 to column b

Type Selectors, Pseudo-elements div, p, h1, ::before, ::after — each adds 1 to column c

CSS Selectors

Results

Sort by specificity

Enter CSS selectors and click Calculate

or press Ctrl+Enter

Try These Examples

How CSS Specificity Works

CSS specificity determines which styles are applied when multiple CSS rules target the same element. Every CSS selector has a specificity value calculated from its component parts. The selector with the highest specificity wins and its styles are applied. If two selectors have equal specificity, the one that appears later in the source code takes precedence.

The Specificity Tuple (a, b, c)

Specificity is expressed as three numbers (a, b, c). Column a counts ID selectors (#header). Column b counts class selectors (.active), attribute selectors ([type="text"]), and pseudo-classes (:hover, :nth-child()). Column c counts type selectors (div, p) and pseudo-elements (::before, ::after). Comparison happens left to right: a selector with (1, 0, 0) always beats (0, 99, 99).

What Does Not Count

The universal selector (*), combinators (+, >, ~, space), and the :where() pseudo-class contribute zero specificity. The :not(), :is(), and :has() pseudo-classes themselves have no specificity, but their arguments are counted — specifically, the most specific argument determines the contribution.

!important and Inline Styles

Inline styles (style="" attribute) have a specificity of (1, 0, 0, 0), which beats any selector-based rule. The !important declaration overrides everything, including inline styles. When two !important declarations conflict, normal specificity rules apply between them. Overusing !important leads to maintainability problems and should be avoided.

Features

Calculate specificity for any CSS selector in (a, b, c) format
Compare multiple selectors side by side
Visual bar indicator showing specificity weight distribution
Sort selectors by specificity (highest first) with one click
Automatic "winner" highlighting for specificity battles
Click-to-try examples for common selector patterns
Handles :not(), :is(), :has(), :where() pseudo-classes correctly
Keyboard shortcuts: Ctrl+Enter to calculate, Ctrl+L to clear
100% client-side — nothing is sent to any server

Common Specificity Mistakes

A common misconception is that specificity works like a base-10 number. In reality, 11 classes do not equal 1 ID. Specificity is compared column by column: (0, 11, 0) is still less than (1, 0, 0). Another frequent mistake is overusing IDs and !important to fix styling conflicts, which creates a specificity escalation that becomes increasingly difficult to manage. Use the lowest specificity needed to achieve the desired styling.

Best Practices

Keep specificity low and consistent across your stylesheets. Use class selectors for most styling, reserve IDs for JavaScript hooks, avoid inline styles, and use !important only as a last resort. Methodologies like BEM (Block-Element-Modifier) help maintain flat specificity by using single-class selectors. The :where() pseudo-class is useful for creating utility styles with zero specificity that can be easily overridden.