📌 What is CSS Specificity?

CSS specificity is a scoring system the browser uses to decide which CSS rule wins when multiple rules target the same element. Think of it as a priority system — the rule with the higher specificity gets applied. 🏆

🧠 Why Specificity Matters?

Without understanding specificity, your styles may not apply as expected. Mastering it helps you write clean, predictable, and maintainable CSS. 💡

📊 Specificity Weight Calculation

Specificity follows a 4-level numeric format:

🎯 How Specificity Works

1️⃣ Inline Styles

Always the highest priority (except !important). 🔥

<p style="color: blue;">This wins!</p>

2️⃣ ID Selectors

Very powerful — use sparingly to avoid overly strong selectors.

#title {
  color: green;
}

3️⃣ Class, Pseudo-class & Attribute Selectors

These are the most common selectors and have moderate specificity — ideal for scalable CSS. ✨

.btn {
  background: black;
  color: white;
}

4️⃣ Element & Pseudo-element Selectors

Lowest specificity — useful for base styles.

p {
  font-size: 16px;
}

⚔️ When Selectors Compete

The browser compares specificity and applies the rule with the higher score.

p { color: black; }        /* specificity: 0,0,0,1 */
.text { color: blue; }   /* specificity: 0,0,1,0 */
#main { color: red; }    /* specificity: 0,1,0,0 */

Final color applied to the element: red 🔥 (ID wins)

⚠️ Understanding !important

The !important flag overrides normal specificity rules. But use it carefully — it can make your CSS harder to maintain. ❗

p {
  color: blue !important;
}

🧩 Tips for Managing Specificity

📝 Real-World Example

Let’s see how specificity decides the final output:

h1 { color: black; }
.title { color: blue; }
#mainTitle { color: red; }

If an element is <h1 id="mainTitle" class="title">, the text becomes red. (ID wins again) 🔥

🔗 Additional Resources