Loading...

CSS Specificity

You already know how to write selectors. Real stylesheets collide: two rules target the same element and the same property. The browser does not guess randomly — it uses specificity (how “precise” a selector is) and, when that ties, source order.

What is CSS specificity?

Specificity is a weight the browser assigns to a selector. When rules conflict, the higher-specificity selector wins for that property. Think of a simple ladder for everyday work: inline style > id > class (and attribute / pseudo-class) > element (and pseudo-element). Universal * and combinators add no specificity of their own.

Ranking at a glance

Memorize this order first. Details and edge cases exist, but this ladder solves most beginner conflicts.

📊 CSS specificity ranking (everyday)

Kind Examples Beats
Inline style style="color: red" Nearly everything in the stylesheet
Id #hero, #nav Classes and elements
Class / attribute / pseudo-class .card, [type="email"], :hover Element selectors
Element / pseudo-element p, h1, ::before Only weaker or equal rules (then source order)

Class beats element

A type selector is broad. A class is more specific — so the class color wins even if the element rule appears later… wait: if the class is more specific, it wins regardless of order. Order only decides ties.

Class wins over element

css
CSS Code 
p {
color: #334155;
}

.note {
color: #0f766e;
}

Reading the conflict

For <p class="note">, both rules match. .note is a class; p is an element. Class wins → teal text.

Id beats class

An id is more specific than a class. Prefer classes for reusable design; use id sparingly when you truly need a unique hook.

Id wins over class

css
CSS Code 
.note {
color: #0f766e;
}

#title {
color: #9f1239;
}

Why this matters

If <h1 id="title" class="note"> shows maroon, the id won — not because it is “more important” emotionally, but because its specificity is higher.

Equal specificity → later rule wins

When two rules have the same specificity, the one that appears later in the CSS wins (among equally specific rules for that property).

Same weight — source order decides

css
CSS Code 
.card {
border-color: #cbd5e1;
}

.card {
border-color: #0f766e;
}

Tie-break habit

Both selectors are one class. The second .card rule wins → teal border. If you expected the first color, check whether something more specific is also matching.

Counting in the wild

Selectors can combine: nav a.button:hover is stronger than a alone because it adds class and pseudo-class weight. You do not need a calculator for every line — ask: “Does this use an id? Extra classes? Or only tags?”

Combined selector beats bare element

css
CSS Code 
a {
color: #334155;
}

nav a.button {
color: #0f766e;
}

About !important

!important can override normal specificity. It is a fire extinguisher, not a daily tool. Overusing it makes later changes painful. Prefer clearer selectors or better structure first.

Practical habits

  • Prefer class for look-and-feel; reserve id for unique page hooks
  • When stuck, ask which ladder step each selector sits on
  • Equal weight → check which rule comes later
  • Avoid stacking long chains just to “win” — they break when HTML changes
  • Reach for !important only after structure and specificity are clear

Try it yourself

  1. Build a page with <p class="note">Hello</p>, <h1 id="title" class="note">Title</h1>, and <a class="button">Go</a> inside <nav>.
  2. Add the element-vs-class pair (p gray, .note teal) and confirm the note paragraph is teal.
  3. Add #title { color: #9f1239; } and confirm the heading becomes maroon despite .note.
  4. Write two .card border-color rules and confirm the later one wins.
  5. Optional: compare a { … } with nav a.button { … } on a nav link.

Common mistakes

  • Thinking “more declarations in a rule” raise specificity — they do not
  • Assuming the last stylesheet always beats an id — higher specificity still wins
  • Using #everything or !important as a default fix
  • Counting a class inside an attribute wrong — know your ladder steps
  • Forgetting that equal specificity falls back to source order

Summary

  • Specificity decides conflicts when selectors compete on the same property
  • Everyday ladder: inline > id > class/attribute/pseudo-class > element/pseudo-element
  • Equal specificity → later rule wins
  • Prefer classes for reusable styling; keep id and !important rare
  • Read conflicts by ladder step first, then by order
  • Practice with p / .note / #title until the winner feels obvious

🧠 Test Your Knowledge

Ready to Start

Test Your Knowledge

Challenge yourself with this interactive quiz and see how well you understand the topic

❓
7
Questions
🎯
70%
To Pass
♾️
∞
Time
🔄
∞
Attempts

📝 Instructions

  • Read each question carefully
  • Select the best answer for each question
  • You can retake the quiz as many times as you want
  • Your progress will be shown at the top
Topic 1 of 1
Css Tutorial