This question is specifically about selector scoring (specificity points), not the full cascade algorithm. Explain how selector weights are computed and compared, then mention tie-breakers briefly. Use it to debug why one rule wins, why another loses, and why !important often hides the real specificity problem. Keep the deep dive on origin/importance/order for the dedicated cascade question.
Interview answer drill
Use this CSS interview question to rehearse a quick answer, common mistake, follow-up, and production pitfall.
How do CSS selectors with higher specificity override others?Frontend interview answer
Interview focus
This CSS interview question tests whether you can explain CSS specificity under the hood: debug override bugs without !important, connect it to production trade-offs, and handle common follow-up questions.
- CSS specificity under the hood: debug override bugs without !important explanation without falling back to memorized docs wording
- Selectors and Specificity reasoning, edge cases, and production failure modes
- How you would answer the most likely CSS interview follow-up
Interview quick answer
Full interview answer
Overview
When multiple CSS rules apply to the same element, the browser resolves conflicts using specificity. Specificity is calculated based on the selector's type - IDs, classes, attributes, and element names each contribute differently to its weight. When a "simple" override refuses to apply, specificity is often the first debug clue.
Scope guard
This page answers “How are selectors scored?” If the interviewer asks about full conflict resolution order (origin, !important, layers, then source order), jump to <a href="/css/trivia/css-cascade-order">How does the CSS cascade determine which styles are applied?</a>.
Selector Type | Example | Specificity Weight |
|---|---|---|
Inline Styles | style='color: red;' | 1000 |
ID Selectors | header | 100 |
Class, Attribute, or Pseudo-class | .btn, [type='text'], :hover | 10 |
Element or Pseudo-element | div, p, ::before | 1 |
Universal or Inherited |
| 0 |
Example: Competing Rules
CSS
p { color: blue; } /* 1 */
.text { color: green; } /* 10 */
#intro { color: red; } /* 100 */
In this case, #intro (specificity 100) overrides .text (10) and p (1), resulting in red text.
Special Case: !important
The !important flag overrides all other specificity rules except inline styles with !important. Overusing it can lead to maintenance headaches, so use it sparingly and strategically.
Calculation Formula
Specificity is commonly represented as a four-part value (a,b,c,d):
- a – Inline styles (1 if present)
- b – Number of IDs
- c – Number of classes, attributes, pseudo-classes
- d – Number of element names and pseudo-elements
Example:
#nav .menu li:hover → (0,1,2,1) → Specificity = 121.Best Practices
- Keep selectors simple and avoid chaining too many elements or classes.
- Use class-based selectors for scalability instead of IDs.
- Reserve
!importantfor utility classes or third-party overrides. - Refactor conflicting styles rather than stacking specificity.
Still so complicated?
Think of specificity like a ranking system — inline styles are presidents, IDs are generals, classes are officers, and element selectors are soldiers. The higher rank always wins the battle for styling control.
Summary
- Specificity is the selector scoring step inside the cascade.
- Selector type weights decide which matching selector wins.
- If specificity ties, later source order wins (unless higher-priority cascade rules apply).
- Keep selectors simple and class-driven to avoid specificity wars.
Similar questions
Guides
Preparing for interviews?
Use this as one explanation rep, then continue with the CSS interview questions cluster or a guided prep path.