What color wins when an ID and class rule conflict?

WHAT THIS TESTS: 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.

A GOOD ANSWER COVERS: 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.

COMMON WRONG ANSWERS: 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.

LIKELY FOLLOW-UPS: 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.

ONE 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.

Source: developer.mozilla.org