CSS Specificity Explained: How to Control Which Styles Win

CSS Specificity Explained: How to Control Which Styles Win

posted Originally published at dev.to 2 min read

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:

css
* {
  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:

css
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:

css
.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:

css
#submitButton {
  background-color: yellow;
}
5. Inline Styles: 1,000 Points – The Heavyweight

Inline styles trump everything except !important.

Example:

html
<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:

css
.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:

css
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.

If you read this far, tweet to the author to show them you care. Tweet a Thanks
This is great Bridget!
Thanks so much

More Posts

ProfileKeeper: Simplify and Organize Your Digital Profiles in One Place

Elmer Urbina - Jan 17

Less is more: presenting my updated web development portfolio

Ingo Steinke - Dec 3, 2024

How to Add a Clickable Visitor Counter to Your Website

Bridget Amana - Dec 30, 2024

How Open Source is Shaping My Journey as a Developer

Anuj Kumar Sharma - Jan 7

Beginner’s Guide to Laravel Socialite for Seamless OAuth Authentication

Snehal Kadwe - Dec 23, 2024
chevron_left