CSS Specificity Explained: How to Control Which Styles Win

Have you ever spent hours tweaking your CSS, wondering why that one stubborn style won’t apply? Welcome to the world of specificity.

Specificity is how browsers decide which CSS rule to apply when multiple rules target the same element. Without understanding it, your stylesheets can quickly turn into a tangled mess. Let’s break it down.

The Specificity Hierarchy

1. Universal Selector: The Zero-Point Contender

The universal selector (*) is at the bottom of the specificity chain with 0 points. It’s like a blanket rule for everything but gets overridden by nearly anything else.

Example:

* {
  color: red;
}
h1 {
  color: blue;
}

Even with * { color: red; }, an <h1> will be blue because the element selector wins.

2. Element Selector: 1 Point of Specificity

Element selectors (h1, p, div) are stronger than universal selectors, carrying 1 point.

Example:

h1 {
  color: green;
}

This rule will override a universal selector targeting the same element.

3. Class, Pseudo-Class, or Attribute Selector: 10 Points

Selectors like .button, :hover, or [type="text"] are more specific, with 10 points.

Example:

.button {
  color: purple;
}

This will override both universal and element selectors.

4. ID Selector: 100 Points

IDs (#submitButton) are significantly more powerful, with 100 points. Use them sparingly, as they can make styles harder to manage.

Example:

#submitButton {
  background-color: yellow;
}

5. Inline Styles: 1,000 Points – The Heavyweight

Inline styles trump everything except !important.

Example:

<div style="color: orange;">Hello World</div>

6. The Almighty !important

Adding !important forces a rule to override others, even inline styles. But overusing it can lead to chaos in your CSS. It can be necessary when using third-party libraries to help override predefined styles.

Example:

.button {
  color: red !important;
}

When Specificity Ties, Order Matters

If two rules have the same specificity, the one that comes later in the stylesheet wins.

Example:

h1 {
  color: red;
}
h1 {
  color: green;
}

Here, <h1> will be green because the second rule is later.

Specificity Points Recap

• Universal Selector (*): 0 points
• Element Selector (div, p): 1 point
• Class, Pseudo-Class, Attribute Selectors: 10 points
• ID Selector (#id): 100 points
• Inline Styles: 1,000 points
• !important: Overrides everything

Mastering specificity lets you write clean, maintainable CSS, saving you from endless debugging. The next time your styles don’t behave, you’ll know exactly where to look.