Understanding CSS Specificity Once and for All

What is specificity?

Specificity is the browser’s mechanism for choosing which CSS rule applies when multiple rules match the same element. It is a score that the browser calculates from the selectors in your stylesheets. The rule with the higher score wins. If two rules have the same score, the one that appears later in the source wins due to the cascade.

How specificity is calculated

Specificity is often described as a four-part value in the form (inline, ids, classes/attributes/pseudo-classes, elements/pseudo-elements). The higher the value in a given position, the stronger that part of the selector is.

• Inline styles: (1, 0, 0, 0) — the style attribute on an element has the highest weight.
• IDs: (0, 1, 0, 0) — an id selector adds one to the second position.
• Classes, attributes, and pseudo-classes: (0, 0, 1, 0) — classes, attribute selectors, and pseudo-classes contribute here.
• Elements and pseudo-elements: (0, 0, 0, 1) — element selectors and pseudo-elements add to the last position.

Examples (for illustration):

In practice, you compare the four-part score from left to right. A higher value in a more significant position beats a lower one, regardless of the smaller differences in the less significant positions.

What happens when specificity is tied?

If two rules have the same specificity, the one that appears later in the CSS (or stylesheet) takes precedence. This is the cascade at work. The order matters only when the specificity scores are identical.

Common mistakes and how to avoid them

• Relying on long chains like div ul li a a:hover—these increase specificity and make maintenance harder.
• Mixing inline styles with stylesheet rules in the same project, creating confusing priority.
• Overusing ID selectors to force styling; this reduces flexibility and makes reuse difficult.
• Using !important as a first resort; it can hide real problems and complicate future changes.

Practical tips to control specificity

• Prefer class selectors over IDs for styling when possible, especially for reusable components.
• Keep selectors short and simple. Prefer one class or a small, specific combination rather than deep descendant chains.
• Use a consistent CSS architecture (like BEM, SMACSS, or OOCSS) to manage specificity and maintainability.
• Leverage the cascade: place more generic rules earlier and more specific rules later, unless you have a good reason to do the opposite.
• Avoid inline styles unless necessary for dynamic styling; inline styles bypass stylesheet specificity entirely.
• Reserve !important for user styles or accessibility overrides when truly required, not for everyday styling.

Practical examples

Understanding how specificity plays out can be easier with concrete samples.

Example 1: Inline style vs ID vs class vs element

HTML:
<p id="title" class="lead" style="color: tomato;">Hello</p>

CSS:
#title { color: blue; }
.lead { color: green; }
p { color: purple; }

Result: The text color will be tomato (from the inline style), because inline styles outrank all stylesheet selectors.

Example 2: Tied specificity resolved by order

HTML:
<p class="note" id="primary">Sample</p>

CSS:
#primary { color: red; }
.note { color: blue; }

Result: If both rules belonged to the same specificity, the rule appearing later in the CSS wins. Here the id selector (0,1,0,0) outranks the class selector (0,0,1,0), so the color would be red regardless of order in this specific case.

Conclusion

Understanding specificity helps you write cleaner, more maintainable CSS. By favoring simple, component-friendly selectors, avoiding unnecessary specificity, and using the cascade intentionally, you can predict and control which styles apply across your project.