How does CSS specificity work and how are conflicting rules resolved?
Learn how CSS specificity ranks selectors, how inline styles, IDs, classes, and source order resolve conflicting rules, and when !important applies.
Expected Interview Answer
CSS specificity is the weighting system the browser uses to decide which rule wins when multiple selectors target the same element and property. It scores selectors by type and applies the highest-scoring declaration.
Specificity is calculated as a tuple of (inline, IDs, classes/attributes/pseudo-classes, elements/pseudo-elements). Inline styles outrank IDs, IDs outrank classes, and classes outrank element selectors; the universal selector and combinators add nothing. When two selectors have equal specificity, the one that appears later in source order wins. !important overrides normal declarations, and inline styles beat selector-based rules of lower rank.
- Predictably resolves conflicting style rules
- Explains why some styles fail to apply despite being written
- Guides writing maintainable, low-specificity selectors
- Clarifies when source order breaks ties
- Helps avoid !important escalation wars
AI Mentor Explanation
Specificity is like the chain of authority on the field: the batter's call is trumped by the on-field umpire, whose decision is overruled by the third umpire, and ultimately the match referee. Each level outranks the one below regardless of how loudly the lower one argues, exactly as an ID selector overrides any number of class selectors.
Step-by-Step Explanation
Step 1
Count inline styles
An inline style attribute carries the highest normal weight, ahead of any selector.
Step 2
Count IDs
Each #id in the selector adds to the second column of the specificity tuple.
Step 3
Count classes, attributes, pseudo-classes
Each .class, [attr], or :hover adds to the third column.
Step 4
Count elements and pseudo-elements
Each tag name or ::before adds to the fourth column; * and combinators add nothing.
Step 5
Compare and break ties
Compare columns left to right; if equal, the later rule in source order wins, and !important overrides normal declarations.
What Interviewer Expects
- Knows the (inline, ID, class, element) weighting
- Understands source order breaks equal-specificity ties
- Can explain !important and its risks
- Knows the universal selector adds no specificity
- Advises keeping selectors low-specificity for maintainability
Common Mistakes
- Thinking source order alone decides, ignoring specificity
- Believing !important changes a selector's specificity score
- Assuming more selectors always mean higher specificity regardless of type
- Forgetting inline styles outrank ID selectors
- Overusing IDs and !important, causing escalation wars
Best Answer (HR Friendly)
“When two CSS rules try to style the same thing, specificity decides which one wins based on how targeted the selector is — an ID beats a class, a class beats a tag, and inline styles beat almost everything. If two rules are equally specific, the last one written wins.”
Code Example
/* specificity 0,0,0,1 — element */
p { color: gray; }
/* specificity 0,0,1,0 — class beats the element */
.note { color: blue; }
/* specificity 0,1,0,0 — ID beats the class */
#intro { color: green; }
/* <p id="intro" class="note">...</p> renders green */<!-- inline style outranks the ID selector above -->
<p id="intro" style="color: orange;">Orange wins</p>
<style>
/* unless a rule uses !important */
#intro { color: red !important; } /* red wins over inline */
</style>Follow-up Questions
- How is specificity calculated as a four-part tuple?
- When does source order determine the winning rule?
- Why is overusing !important considered an anti-pattern?
- Does the universal selector (*) add to specificity?
MCQ Practice
1. Which selector has the highest specificity?
An ID selector (0,1,0,0) outranks any combination of classes, pseudo-classes, or element selectors.
2. If two rules have equal specificity, which one applies?
With equal specificity, the cascade uses source order, so the later declaration wins.
3. What does the universal selector (*) contribute to specificity?
The universal selector and combinators add zero specificity.
Flash Cards
What are the four specificity columns? — Inline styles, IDs, classes/attributes/pseudo-classes, elements/pseudo-elements.
What breaks a specificity tie? — Source order — the later rule wins.
Does !important raise specificity? — No. It overrides normal declarations but does not change the specificity score.
Specificity of #id vs .class .class? — The single ID (0,1,0,0) still beats two classes (0,0,2,0).