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.