Calculate and compare CSS selector specificity scores instantly. Visual breakdown of ID, class, and element weights — debug specificity conflicts and learn CSS cascade rules.
Enter CSS selectors above to calculate specificity
Click an example button to get started
ID selectors
#id Classes, attributes, pseudo-classes
.class [attr] :hover Elements, pseudo-elements
div ::before CSS Specificity is the algorithm browsers use to determine which CSS rule takes precedence when multiple rules target the same element. It is calculated as a three-component value (A, B, C) where A counts ID selectors, B counts class selectors, attribute selectors, and pseudo-classes, and C counts element selectors and pseudo-elements. A higher specificity always wins regardless of the order the rules appear in your stylesheet. Understanding specificity is essential for writing maintainable CSS and debugging why certain styles aren't applying as expected.
Specificity is compared component by component from left to right: A (IDs) is compared first, then B (classes), then C (elements). A single ID selector (1,0,0) always beats any number of class selectors (0,n,0). The universal selector (*), combinators (+, >, ~, space), and :where() have zero specificity. The :not(), :is(), and :has() pseudo-classes take the specificity of their most specific argument. Inline styles override all selector-based specificity, and !important overrides inline styles.
Essential terms and definitions related to CSS Specificity Calculator.
A weight calculated for each CSS selector that determines which rule takes precedence when multiple rules match the same element. Expressed as a tuple (A, B, C) where A = ID selectors, B = class/attribute/pseudo-class selectors, C = element/pseudo-element selectors.
The CSS cascade is the algorithm that resolves conflicts between multiple CSS rules targeting the same element. It considers (in order): importance (!important), specificity, source order, and origin (user agent, author, user stylesheets).
Another term for specificity — the calculated priority of a CSS selector. Higher weight means the rule takes precedence when multiple rules compete for the same property on the same element.
CSS specificity is a scoring system browsers use to decide which CSS rule applies when multiple rules target the same element. It is expressed as three numbers (A, B, C): A counts ID selectors (#id), B counts class selectors (.class), attribute selectors ([attr]), and pseudo-classes (:hover), and C counts element selectors (div) and pseudo-elements (::before). Higher numbers win, compared left to right.
When two selectors have equal specificity, the one that appears later in the stylesheet wins (source order). However, specificity always takes priority over source order — a more specific selector will win even if it appears earlier in the CSS file.
!important overrides all specificity calculations. However, if two rules both use !important, normal specificity comparison applies between them. Overusing !important leads to unmaintainable CSS — it is better to increase specificity intentionally or restructure your selectors.
The :not(), :is(), and :has() pseudo-classes themselves add zero specificity. Instead, they take the specificity of their most specific argument. For example, :not(.active) has the same specificity as .active → (0,1,0). The :where() pseudo-class is unique — it always has zero specificity regardless of its arguments.
Inline styles (style="...") have a specificity that beats any selector-based rule. The only way to override an inline style with a stylesheet rule is to use !important. In specificity notation, inline styles are sometimes represented as (1,0,0,0) — a fourth component that outranks all selector specificity.
Common errors developers encounter and how to resolve them.
A style is not being applied even though the selector matches The most likely cause is that another rule with higher specificity is overriding it. Paste both selectors into this calculator to compare their specificity scores. If they are equal, check source order — the later rule wins. Also check for !important declarations that override specificity.
Understanding why a long selector beats a short one A selector like "div.container ul li a" (0,1,4) has lower specificity than "#nav a" (1,0,1) because a single ID selector always outweighs any number of class and element selectors. The number of components matters less than which column they fall in.