CSS Specificity — How CSS Rules Win - MiniCoursey — Quick & Free Mini Courses for Fast Learning

Ever wonder why your CSS isn’t applying the way you expect? It’s probably because of CSS Specificity. Knowing how specificity works helps you write clean, predictable stylesheets — without needing to use !important all the time. In this MiniCoursey quick guide, you’ll learn what specificity is, how the browser calculates it, and how to write rules that do exactly what you want.

What is CSS Specificity?

CSS Specificity is the score that determines which style rules take priority when multiple rules target the same element. The browser looks at the specificity value and applies the most specific rule.

How Specificity is Calculated

Specificity is like a score made up of four parts: inline styles, IDs, classes/attributes/pseudo-classes, and elements/pseudo-elements. Inline styles have the highest weight, then IDs, then classes, then elements.

Example of Specificity

Here’s how specificity is counted:

Inline style: 1,0,0,0
ID selector: 0,1,0,0
Class, attribute, pseudo-class: 0,0,1,0
Element, pseudo-element: 0,0,0,1


/* Less specific */
p {
  color: black;
}

/* More specific */
p.highlight {
  color: blue;
}

/* Most specific */
#intro {
  color: red;
}

How to Avoid Specificity Wars

Keep your selectors as simple as possible. Don’t nest too deep or chain too many classes. Organize styles logically so you don’t have to override with !important. If needed, use a single class with higher specificity instead of mixing ID and element selectors.

💡 Pro Tip: Use browser DevTools to inspect elements and see which rule is winning — great for debugging.

⚠️ Common Mistake: Avoid relying on !important to fix conflicts — it often creates more problems later.

FAQ

Q: Do inline styles always win?
A: Yes — inline styles have the highest specificity, unless you use !important.

Q: What’s the universal selector’s specificity?
A: The universal selector * has the lowest specificity (0,0,0,0).

Where to Learn More

Try MDN’s specificity calculator and practice by writing selectors with different scores. Knowing how it works saves hours of debugging.

Conclusion

Congrats — you now know how CSS Specificity works! Use this knowledge to write cleaner, conflict-free stylesheets that do exactly what you intend.

✨ Bookmark MiniCoursey for more quick & free mini courses!

CSS Specificity — How CSS Rules Win