What color wins when an ID and class rule conflict?
Your grasp of CSS specificity scoring beyond source order.
Red wins; an ID scores 1-0-0 while a class scores 0-1-0, so the ID rule beats the class rule.
Saying the last declared rule wins or that order matters.
What's really being asked
This question probes whether you understand the specificity algorithm as a weighted scoring system rather than a simple tie-breaker. Interviewers want to see that you know specificity is a three-column value and that IDs outrank classes by design, not by accident of source order. It also checks if you can articulate why the cascade behaves differently for different selector types.
The full answer
First, state clearly that the text will be red. Second, explain that specificity is calculated as a three-column value in the format ID-CLASS-TYPE. Third, note that an ID selector adds one to the ID column for a score of 1-0-0, while a class selector adds one to the CLASS column for a score of 0-1-0. Fourth, emphasize that browsers compare the ID column first; since 1 beats 0, the ID rule wins before the CLASS column is ever evaluated. Fifth, mention that this holds true regardless of which rule appears first in the stylesheet, because specificity outweighs order of appearance when the values differ.
The mistakes people make
A major red flag is claiming the text will be blue because the class rule comes later in the file. That confuses specificity with source order, which only matters when specificity is equal. Another mistake is treating specificity as a single integer and saying an ID is worth ten or one hundred points; the three-column structure is categorical, not arithmetic. Some candidates also suggest adding !important to the class as a standard solution, which signals a lack of comfort with selector architecture and a tendency to escalate rather than engineer.
What usually comes next
The interviewer may ask what happens if you add an inline style to the paragraph, which would win because inline styles have higher specificity than IDs. They might ask how to increase the class selector's specificity without an ID, perhaps by chaining classes or using attribute selectors, though this is generally discouraged. Another follow-up is how specificity interacts with cascade layers or !important, or how the :where pseudo-class affects specificity since it contributes zero to all columns.
A concrete example
Imagine a stylesheet where .main-text is defined two hundred lines after #intro, and #intro is never mentioned again. A junior developer might expect the later rule to override the earlier one. In reality, the paragraph remains red until the selector targeting it changes. If a designer later adds a rule like #intro.main-text, the specificity becomes 1-1-0, which still beats 0-1-0 but is not needed to win against the class alone. If they instead add an inline style like style="color: green", that declaration wins with its own specificity category, demonstrating the full hierarchy from type to class to ID to inline.
Interview question
Which statement correctly explains why an ID selector beats a class selector when they conflict?
- a.The class rule wins because its CLASS column score of 1 is greater than the ID column score of 0
- b.The class rule wins if it appears later, since source order overrides specificity when selectors differ
- c.The ID rule wins because the specificity algorithm compares the ID column first, and 1-0-0 outranks 0-1-0Correct
- d.The ID rule wins because specificity is a single integer score and an ID is worth 100 points versus 10 for a class
Why? this is the answer
Specificity is a three-column value scored as ID-CLASS-TYPE, so an ID's 1-0-0 always beats a class's 0-1-0 before the CLASS column is ever evaluated. The most tempting distractor claims the later class wins, but source order only breaks ties when specificity is equal.
Just read this? Test yourself on what you have been reading.
Read the original → developer.mozilla.org
- #css
- #specificity
- #cascade
- #frontend
- #interview
You just looked this up. Could you explain it out loud?
That is the part interviews actually test. Tezvyn takes questions like this one and gives you what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on css — each one lists the topics its interview covers.
See open roles