The Cascade & Specificity
Solve the mystery of why your styles aren't appearing. Master the prioritized algorithm that browsers use to resolve style conflicts.
Expert Answer & Key Takeaways
Solve the mystery of why your styles aren't appearing. Master the prioritized algorithm that browsers use to resolve style conflicts.
1. The Conflict: Who Wins?
When multiple CSS rules target the same element, the browser uses an algorithm called The Cascade to decide which one to apply.
The Example: The Duel
/* Rule 1: Element Selector */
p { color: blue; }
/* Rule 2: Class Selector */
.text--highlight { color: red; }
/* Rule 3: Inline Style (via HTML) */
/* <p style='color: green;'>...</p> */Result: The paragraph will be Green because inline styles are the most specific and overwrite external CSS.
2. The Specificity Scorecard
Specificity determines which CSS rule 'wins' when multiple rules target the same element. Think of it as a point system (Weight):
| Selector Type | Example | Points (Weight) |
|---|---|---|
| Inline Styles | style='...' | 1, 0, 0, 0 (Highest) |
| ID Selector | #header | 0, 1, 0, 0 |
| Classes / Pseudo | .btn, :hover | 0, 0, 1, 0 |
| Elements | div, p, h1 | 0, 0, 0, 1 (Lowest) |
[!TIP] The Tie-Breaker Rule: If two rules have the exact same specificity, the one that appears last in the CSS file wins.
3. The Cascade Algorithm
The browser goes through these steps in order to resolve which style to use:
- Importance: Does it have
!important? (The nuclear option). - Origin: Was it set by the Browser (User Agent), the User, or the Author (You)?
- Specificity: Which selector is the most targeted (The point system above).
- Order of Appearance: If specificity is tied, the last one defined wins.
4. The !important Warning
Adding
!important at the end of a value makes that rule win regardless of specificity. Use it only when absolutely necessary (e.g., utility classes or third-party style overrides)./* Use sparingly! */
.u-hidden {
display: none !important;
}[!WARNING] Mastery Note: Overusing!importantcreates 'Technical Debt'. It makes your CSS impossible to manage later because you'll eventually need!importantto override another!important.
🎯 Practice Challenge: Specificity Duel
Which of these selectors has the highest specificity?
div p(Score: 0,0,0,2).container p(Score: 0,0,1,1)#main .title(Score: 0,1,1,0)body #main p(Score: 0,1,0,2)
Answer: Selector #3 (
#main .title) wins. It has an ID and a Class, totaling a higher weight than any other combination here.5. Senior Interview Corner
Q: What happens if two selectors have the exact same specificity score?
A: The Cascade falls back to the 'Order of Appearance' rule. The selector that was defined later in the CSS file (or later in the document) will overwrite the earlier one.
Q: How do you override an
!important declaration?A: The only way to override an
!important is with another !important that has a higher specificity or appears later in the cascade. This is why !important is considered a 'last resort' in professional architecture.Top Interview Questions
?Interview Question
Q:In the specificity point system, which of these has the highest weight?
A:
ID selector
?Interview Question
Q:If two rules targeting the same element have the same specificity, which one wins?
A:
The one defined last
Course4All Engineering Team
Verified ExpertFrontend Architects
Focused on layout performance, modern CSS4+ features, and responsive design, our team provides the blueprint for professional web interfaces.
Pattern: 2026 Ready
Updated: Weekly
Found an issue or have a suggestion?
Help us improve! Report bugs or suggest new features on our Telegram group.