CSS Specificity Calculator

CSS specificity is a weight assigned to a CSS selector that determines which style rule is applied when multiple rules match the same element. It is represented as a three-part value (a, b, c) where a counts ID selectors, b counts class/attribute/pseudo-class selectors, and c counts element type and pseudo-element selectors.

Specificity is calculated by counting three categories in a selector: (a) ID selectors like #header, (b) class selectors (.card), attribute selectors ([type="text"]), and pseudo-classes (:hover, :nth-child), and (c) type selectors (div, p) and pseudo-elements (::before). The universal selector (*) and combinators (+, ~, >) have no specificity.

The selector with the higher specificity wins. Compare the (a, b, c) values left to right: more IDs (a) always beats more classes (b), and more classes always beat more elements (c). If specificity is equal, the rule that appears later in the stylesheet wins.

The numeric score is a simplified comparable value (a * 10000 + b * 100 + c) used to rank selectors from highest to lowest. It should not be interpreted as a literal CSS value — CSS specificity is not a single number but a three-part comparison.

!important is not part of specificity itself — it overrides all other declarations regardless of specificity. This tool calculates the selector specificity only, not the effect of !important. Avoid using !important in production CSS; prefer more specific selectors instead.

No. The universal selector (*) has zero specificity (0, 0, 0). Combinators (+, >, ~, space) also contribute nothing to specificity. Only ID, class, attribute, pseudo-class, element, and pseudo-element selectors add to specificity.

The :not() pseudo-class itself has no specificity, but the selector inside it does. For example, :not(#id) contributes (1, 0, 0) to specificity (one ID). This tool correctly accounts for :not() by parsing the argument inside the parentheses.

:: is the modern double-colon syntax for pseudo-elements (::before, ::after, ::placeholder). The single-colon legacy syntax (:before, :after) is still supported by browsers but deprecated. Both add 1 to the c (element/pseudo-element) specificity count.

Inline styles (e.g., style="color: red") have a specificity of (1, 0, 0, 0) — higher than any selector — represented as a fourth category not covered by this tool. For practical purposes, inline styles always override stylesheet rules of the same property (unless !important is used).

Yes. When two selectors have the same (a, b, c) values, the one that appears later in the source order wins. This tool displays them with the same rank when they have identical scores, and you can look at the (a, b, c) breakdown to confirm they are truly equivalent in weight.

High specificity makes styles harder to override and maintain. When you need to override a style, you must write an even more specific selector or use !important. Keeping specificity low makes your CSS more modular and predictable, especially in large codebases or component libraries.

This tool supports the most common CSS3 selectors including IDs, classes, attributes, pseudo-classes (including :not()), pseudo-elements, and type selectors. Complex modern selectors like :is(), :where(), :has() may not be fully parsed — :where() has zero specificity by spec, and :is()/:has() take the specificity of their most specific argument.