CSS Specificity Calculator

CSS specificity is the set of rules a browser uses to decide which style declaration wins when more than one rule targets the same element. It is often described as a weight, or as a tuple of counts, so that developers can predict the outcome of conflicting rules before they ever open a debugger.

At a high level, selectors fall into buckets. ID selectors are the strongest, classes, attributes and pseudo-classes sit in the middle, and type selectors and pseudo-elements are the weakest. Inline styles sit outside ordinary selectors and are treated specially. When two rules clash, the selector with the higher overall weight wins, and if the weights are equal the rule declared later in the cascade wins.

This tool parses a selector and counts how many IDs, classes (including attribute selectors and pseudo-classes), and elements (including pseudo-elements) it contains. It then computes a numeric score using the formula ids × 100 + classes × 10 + elements, which makes it easy to compare two selectors at a glance. The result is an approximation of the cascade rules, not a full CSS engine.

Pseudo-classes such as :hover count as a class, while pseudo-elements such as ::before count as an element. Functional pseudo-classes like :not(), :is(), and :has() add one class for the wrapper plus whatever their inner selector contains, which mirrors how real browsers weigh them. Inline styles appear in their own column but contribute 0 to the numeric score in this implementation.

Key Concepts

• Specificity buckets — IDs, classes/attributes/pseudo-classes, and elements/pseudo-elements.
• Numeric score — ids × 100 + classes × 10 + elements, used for fast comparison.
• Inline styles — shown in their own column; this implementation does not add them to the numeric score.
• Pseudo-classes — :hover, :first-child and similar count as a class.
• Pseudo-elements — ::before, ::first-line and similar count as an element.
• Functional pseudo-classes — :not(), :is(), :has() count as a class plus their inner contents.

1. Enter a selector — Type any CSS selector into the input, or click Examples to cycle through the built-in samples.
2. Calculate the specificity — Press Calculate Specificity, or keep typing; the breakdown updates as you edit.
3. Read the breakdown — Review the inline, ID, class/attribute, and element counts and the combined numeric score.
4. Compare two selectors — Optionally enter a second selector to see which one wins, or whether they tie.
5. Inspect the visualization — Use the color-coded output to see which parts of the selector fill each bucket.

Functional pseudo-classes such as :not(), :is(), and :has() count as one class for the wrapper, and the selector inside their parentheses is counted as well. For example, :not(#id) adds a class plus an ID. The !important declaration overrides normal specificity entirely and should be used sparingly.

Specificity questions come up constantly when writing and reviewing CSS. Here are some of the most common situations where this calculator helps.

1. Debugging overrides — work out why one rule is beating another without guessing.
2. Reviewing stylesheets — spot selectors that carry more weight than they need.
3. Learning CSS — see how each part of a selector contributes to its weight.
4. Resolving conflicts — compare two competing selectors and choose the cleaner fix.
5. Auditing design systems — check that component selectors stay predictable and easy to extend.
6. Interview preparation — practise the specificity questions that appear in front-end interviews.