What is Specificity in CSS?
Learn what CSS specificity is, how it's calculated with inline, id, class, and element weights, and how source order and !important affect the cascade.
Expected Interview Answer
Specificity is the algorithm the browser uses to decide which CSS rule wins when multiple rules target the same element and property, based on the types of selectors used rather than how the CSS is written.
Specificity is calculated as a four-part weight: inline styles score highest, then the count of id selectors, then classes/attribute selectors/pseudo-classes, then element type selectors and pseudo-elements, often written as (inline, id, class, element). When two rules have equal specificity, the one that appears later in the source order (or is loaded later) wins, which is why cascade order matters alongside specificity. The !important flag overrides normal specificity entirely for that declaration, but should be used sparingly since it makes future overrides harder. Universal selectors (*) and combinators (>, +, ~) themselves add no specificity weight; only the actual selectors they connect do.
- Explains why a rule 'isn't applying' even though it's written last
- Prevents unnecessary !important overuse
- Guides selector design toward low, predictable specificity
- Helps debug CSS override conflicts quickly
- Underpins how frameworks like BEM keep specificity flat
AI Mentor Explanation
Specificity is like the chain of command deciding whose call on a run-out stands — the on-field umpire's word (element selectors) is easily overruled by the third umpire's replay (class selectors), which itself yields to the match referee's ruling (id selectors). An inline style is like the ICC overturning everyone on the spot, and !important is like a rule so absolute no review can touch it.
Step-by-Step Explanation
Step 1
Identify selector types in the conflicting rules
Break each selector into inline styles, id selectors, class/attribute/pseudo-class selectors, and element/pseudo-element selectors.
Step 2
Score each rule
Count occurrences in each category to build a weight tuple, e.g. (0,1,2,1) for one id, two classes, one element.
Step 3
Compare weights left to right
Higher inline beats higher id, which beats higher class, which beats higher element — categories never 'add up' across each other.
Step 4
Break ties with source order
If two rules have identical specificity, the rule declared later in the cascade (or loaded later) wins.
Step 5
Reserve !important for true overrides
!important beats normal specificity entirely for that declaration, but overusing it makes the cascade unpredictable — use sparingly, e.g. utility classes or third-party overrides.
What Interviewer Expects
- Explains specificity as a selector-weighting algorithm, not writing order alone
- Can state the id > class > element hierarchy
- Knows source order only matters as a tiebreaker for equal specificity
- Understands !important's role and downsides
- Can reason about a specific selector conflict and predict the winner
Common Mistakes
- Thinking specificity is just 'whichever rule is written last wins'
- Believing combinators like > or + add specificity weight
- Overusing !important instead of fixing selector specificity
- Forgetting inline styles outrank all selector-based specificity
- Assuming more selectors always means higher specificity regardless of type
Best Answer (HR Friendly)
“Specificity is the rulebook browsers use to decide which style wins when two CSS rules conflict. More specific selectors, like an ID, beat more general ones, like a tag name, so understanding this helps you predict exactly how a page will look.”
Code Example
p { color: blue; } /* element: (0,0,0,1) */
.intro { color: green; } /* class: (0,0,1,0) */
#hero .intro { color: red; } /* id + class: (0,1,1,0) */
/* <p id="hero" class="intro">text</p> renders red — id + class wins */p { color: blue !important; } /* wins regardless of other specificity */
#hero .intro { color: red; } /* loses to !important above */Follow-up Questions
- How is specificity calculated as a weight tuple?
- What breaks a tie when two selectors have equal specificity?
- Why is overusing !important considered a CSS anti-pattern?
- Do combinators like > or ~ add any specificity weight?
- How do methodologies like BEM help keep specificity low and flat?
MCQ Practice
1. Which selector type has the highest specificity weight (excluding inline styles and !important)?
ID selectors outrank class, attribute, pseudo-class, element, and universal selectors in the specificity hierarchy.
2. When two rules have identical specificity, which one applies?
With equal specificity, the cascade falls back to source order — the later declaration wins.
3. What overrides normal specificity entirely for a single declaration?
!important forces that declaration to win regardless of the competing rule's specificity, except against another !important of higher specificity.
Flash Cards
What does CSS specificity determine? — Which of several conflicting CSS rules applies to an element, based on selector weight.
Order of specificity, highest to lowest? — Inline styles > ID selectors > classes/attributes/pseudo-classes > elements/pseudo-elements.
What breaks a specificity tie? — Source order — the rule declared later in the cascade wins.
What does !important do? — Overrides normal specificity for that declaration, taking precedence over competing rules of any lower-priority !important status.