CSS Specificity Calculator

CSS specificity is the scoring system browsers use to decide which CSS rule wins when two or more rules target the same element and set the same property. Every selector carries a weight expressed as three numbers - (A, B, C) - representing the count of ID selectors, class/attribute/pseudo-class selectors, and element/pseudo-element selectors respectively. When rules conflict, the browser compares these scores from left to right, and the rule with the higher score takes effect. If scores are equal, the rule that appears later in the stylesheet wins.

Specificity is calculated by counting three types of selector component separately. Each ID selector (#id) adds 1 to the first column (A). Each class (.class), attribute selector ([attr]), or pseudo-class (:hover) adds 1 to the second column (B). Each element type (div, a) or pseudo-element (::before) adds 1 to the third column (C).

For example, the selector #nav .link:hover span scores (1,2,1) - one ID, one class, one pseudo-class, and one element. Comparison always starts at column A. A selector scoring (1,0,0) beats any selector scoring (0,x,x) regardless of how large x is. The columns are not added together into a single number; they are compared independently from left to right.

Yes. The three columns are compared independently, not summed. A single class selector scoring (0,1,0) will always beat ten element selectors scoring (0,0,10), because the B column (1) is greater than the B column (0) - and once a column is decided, the remaining columns are irrelevant. This is a common misconception: there is no number of lower-column selectors that can "add up" to outrank a higher column.

!important sits entirely outside the normal specificity system. A declaration marked !important will override any normal declaration targeting the same property on the same element, regardless of specificity scores. When two !important declarations conflict with each other, specificity is then used as a tiebreaker between them - the !important rule with the higher specificity wins. Because of this, !important should be used as a last resort; once introduced, the only way to override it is with another !important, which can quickly become difficult to manage.

Yes. Inline styles - written directly in the HTML style attribute - are treated as a fourth implicit column, effectively scoring (1,0,0,0), which is higher than any selector-based specificity. The only way to override an inline style from a stylesheet is to use !important. This is one reason inline styles are generally discouraged for component styling: they make it very hard to override or theme elements from external stylesheets.

All three pseudo-classes adopt the specificity of their most specific argument, not the pseudo-class itself. So :is(#id, .class) scores (1,0,0) because #id is the most specific argument. :not(.inactive) scores (0,1,0) because .inactive is a class. :has(> img) scores (0,0,1) because img is an element selector. This means you need to be careful about what you pass into these pseudo-classes - a single high-specificity argument can significantly raise the score of the whole selector.

:where() always contributes a specificity of (0,0,0), regardless of what selectors are inside it. This makes it extremely useful for writing base or reset styles that you want to be easy to override - any author style, no matter how simple, will win over a rule scoped inside :where(). It is commonly used in CSS resets and design system foundations precisely because it adds no specificity weight while still allowing complex selector matching.

There are a few common causes. First, check for !important on the competing rule - it overrides specificity entirely. Second, check for inline styles on the element, which also beat selector-based specificity. Third, verify the specificity scores are actually what you expect - a single ID in the competing selector will beat any number of classes in yours. Fourth, if specificity scores are genuinely equal, the rule that appears later in the stylesheet (or in a later-loaded stylesheet) wins. Finally, check that your selector actually matches the element - a selector that does not match cannot apply at all.

Generally no, and most CSS methodologies actively discourage it. An ID selector scores (1,0,0), which is so high that it is nearly impossible to override without another ID or !important. IDs are also unique per page, which means ID-based styles cannot be reused across components. Classes are almost always the better choice for styling - they are reusable, composable, and sit at a specificity level that is easy to manage. Reserve IDs for JavaScript hooks and accessibility references where their uniqueness is genuinely useful.

The CSS @layer at-rule (supported in all modern browsers) lets you organise styles into named layers with an explicit priority order. Crucially, layer order is resolved before specificity - a rule in a higher-priority layer wins over a rule in a lower-priority layer even if the lower layer's selector is more specific. This gives you a powerful tool to manage cascade conflicts without resorting to high-specificity selectors or !important. For example, you can put reset styles in a low-priority layer and component styles in a high-priority layer, guaranteeing that components always win regardless of specificity.

Nothing. The universal selector * contributes a specificity of (0,0,0). The same is true for combinators - descendant (space), child (>), adjacent sibling (+), and general sibling (~). They affect which elements a selector matches but have no bearing on its specificity score. So * > div scores (0,0,1), the same as div on its own.