CSS Specificity

CSS specificity is a priority system browsers use to decide which CSS rule is applied when multiple rules target the same element and the same property.

This keeps meaning identical but removes redundancy and improves scan clarity.

Think of specificity as a score:

The rule with the higher score wins.

⚠️ Important:
More specific selectors override less specific ones — regardless of order.

1. Inline styles: An inline style attribute present on an element will override any styles in external stylesheets and will have the highest level of specificity.
2. IDs: Each unique ID will add to the specificity.
3. Classes, pseudo-classes, and attributes: Each unique class, pseudo-class, or attribute will add to the specificity.
4. Elements and pseudo-elements: Each unique element or pseudo-element will add to the specificity.

The specificity is calculated as follows:

Start at 0, add 100 for each ID value, add 10 for each class value (or pseudo-class or attribute selector), add 1 for each element selector or pseudo-element.

Let's see an example:

body #content .data {  
  background-color: blue;  
}  

This selector contains 1 element, 1 ID, and 1 class selector, giving it a specificity score of 111. Which means that the overall specificity of this selector is 111. So to override it, you would need to write a selector which has the specificity level larger than 111.

Equal specificity: the latest rule wins - If the same rule is written twice into the external style sheet, then the latest rule wins:

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

This rule order behavior becomes especially important when selectors have equal specificity, which you’ll see often as your stylesheets grow.

Let's see a real-world example:

HTML

<div id="content" class="main">
  <p class="highlight">Hello, world!</p>
</div>

CSS

p {
  color: blue;
}

.main .highlight {
  color: red;
}

#content p {
  color: green;
}

p.highlight {
  color: yellow;
}

Let’s Compare Specificity Scores

The text will be green because the #content p selector has the highest specificity (1 ID + 1 element), which beats all other selectors in this example. It contains 1 ID and 1 element, so it has a specificity of 1,0,1. All the other selectors have lower specificity.

The specificity can lead to confusing results if not managed properly, so it's good to keep your CSS selectors as simple as possible and avoid unnecessary complexity.

CSS specificity often causes problems when:

• selectors become too long and complex
• IDs are overused
• styles are patched instead of refactored
• developers try to “fight” CSS instead of understanding it

• Prefer class selectors over IDs
• Keep selectors short and readable
• Avoid chaining unnecessary selectors
• Never rely on !important (almost always a smell)
• Structure CSS logically instead of stacking overrides

❌ Using IDs everywhere
❌ Writing selectors like body div ul li a span
❌ Adding more selectors instead of fixing structure
❌ Using !important to “fix” conflicts

When CSS conflicts happen, ask yourself:

1. Which selector is more specific?
2. Do IDs beat classes?
3. Are there inline styles?
4. If specificity is equal, which rule is last?

If you follow these steps, 90% of CSS issues disappear.