How Does CSS Specificity Work?
Learn how CSS specificity is calculated, why IDs beat classes, and how source order and !important affect which rule wins.
Expected Interview Answer
CSS specificity is a weighted scoring system the browser uses to decide which of several conflicting rules wins on an element, calculated by counting IDs, classes/attributes/pseudo-classes, and element/pseudo-element selectors in each rule, with higher categories always outranking any number of lower ones.
Every selector is scored as a tuple of four counts: inline styles, ID selectors, class/attribute/pseudo-class selectors, and type/pseudo-element selectors, usually written as (a, b, c, d). The browser compares rules category by category from left to right, so a single ID selector always beats any number of classes, and a single class always beats any number of element selectors, regardless of how many low-weight selectors are stacked. When two rules have identical specificity, the one that appears later in the source order (or is loaded later) wins, which is why source order matters as the final tiebreaker. The `!important` flag overrides normal specificity entirely for that declaration, and should be treated as an escape hatch rather than a default tool, since it makes future overrides harder to reason about.
- Predicts which rule wins without guessing or trial and error
- Explains why an ID selector overrides many chained classes
- Clarifies why source order only matters as a tiebreaker
- Helps avoid !important by understanding the real cause of a conflict
AI Mentor Explanation
CSS specificity is like the chain of command deciding whose instruction on the field wins when the captain, the vice-captain, and a fielder all shout different placements at once. The captain’s call (an ID) always overrides the vice-captain’s (a class), no matter how many fielders (element selectors) are also shouting. If two people of the same rank give conflicting calls, the most recent one is followed. That ranked, category-first override is exactly how the browser resolves competing CSS rules.
Step-by-Step Explanation
Step 1
Identify conflicting rules
The browser finds every declaration targeting the same property on the same element.
Step 2
Score each selector
Each rule is scored as (inline, ID count, class/attribute/pseudo-class count, type/pseudo-element count).
Step 3
Compare category by category
Scores are compared left to right; a higher category always wins regardless of lower-category counts.
Step 4
Break ties by source order
If specificity scores are identical, the declaration that appears later wins, unless !important intervenes.
What Interviewer Expects
- Correct description of the (inline, ID, class, type) specificity tuple
- Understanding that categories are compared before counts within a category
- Awareness that source order is only a tiebreaker for equal specificity
- Recognition that !important should be avoided as a default fix
Common Mistakes
- Believing more selectors always means higher specificity regardless of category
- Reaching for !important instead of understanding the actual specificity conflict
- Confusing source order with specificity as the primary resolution mechanism
- Forgetting that inline styles outrank all selector-based specificity
Best Answer (HR Friendly)
“CSS specificity is basically a set of rules the browser uses to decide which style wins when two rules target the same element. IDs beat classes, classes beat plain element selectors, and if two rules are equally specific, whichever one is written later in the stylesheet wins.”
Code Example
/* Specificity (0,0,1,0) - one class */
.button {
background: gray;
}
/* Specificity (0,1,0,0) - one ID, always wins over .button */
#submit-btn {
background: blue;
}
/* Specificity (0,0,2,1) - still loses to the ID above */
div.container .button {
background: green;
}Follow-up Questions
- How does !important interact with specificity, and when is it acceptable to use?
- How do CSS custom properties and cascade layers affect specificity conflicts?
- What specificity does a pseudo-class like :hover carry compared to a class?
- How would you refactor a codebase full of !important overrides?
MCQ Practice
1. Which selector generally wins when specificity is compared?
Specificity compares categories (ID, class, type) in order; higher category always wins regardless of count.
2. What breaks a tie when two selectors have identical specificity?
When specificity scores match exactly, the declaration that appears later in the cascade applies.
3. What overrides normal specificity comparison entirely for a single declaration?
!important bypasses normal specificity scoring for that declaration, though two !important rules still resolve by specificity/order.
Flash Cards
What is the specificity tuple order? — Inline styles, ID selectors, class/attribute/pseudo-class selectors, type/pseudo-element selectors.
Does ten classes beat one ID? — No — a single ID always outranks any number of classes.
What breaks a specificity tie? — Source order — the later rule in the cascade wins.
What overrides specificity entirely? — !important, which should be used sparingly as an escape hatch.