How do class and ID selectors differ in specificity and use case?

WHAT THIS TESTS: This question checks two things. First, do you know how browsers calculate specificity using the ID-CLASS-TYPE weight categories. Second, do you understand the architectural difference between unique and reusable selectors, which matters for building scalable design systems and avoiding specificity wars.

A GOOD ANSWER COVERS: A strong response starts with the numeric specificity values from the cascade algorithm. An ID selector like #example contributes 1-0-0 to the weight, while a class selector like .myClass contributes 0-1-0. That means a single ID outweighs any number of classes, type selectors, or pseudo-classes combined in the CLASS and TYPE columns. Next, the candidate should explain intended use. IDs are meant to identify a single unique element per document, such as a main navigation container or a modal root. Classes are meant for repeatable styling patterns, such as buttons, cards, or form inputs that appear many times. A senior candidate might also note that specificity is only compared within the same cascade origin and layer, and that when specificity is equal, order of appearance wins.

COMMON WRONG ANSWERS: Watch out for answers that say the only difference is that IDs are unique in the HTML while classes are not. That is true for the DOM, but the question asks about CSS specificity and use case, so missing the 1-0-0 versus 0-1-0 scoring is a gap. Another red flag is claiming that inline styles or important rules are part of the ID versus class comparison; those are separate concepts in the cascade. Finally, saying you always use IDs for styling because they are stronger is an anti-pattern; it makes overrides difficult and breaks component reusability.

LIKELY FOLLOW-UPS: An interviewer might ask how you would override an ID selector without using important. They could also ask about the specificity of attribute selectors, pseudo-classes, or pseudo-elements. Another common pivot is asking why many CSS methodologies like BEM avoid IDs entirely, or how cascade layers and important interact with specificity.

ONE CONCRETE EXAMPLE: Imagine a page with a header that has an ID of site-header and a class of sticky. A rule targeting #site-header has specificity 1-0-0. A rule targeting .sticky has specificity 0-1-0. Even if the sticky class rule appears later in the stylesheet, the ID rule will win if they set the same property, because 1-0-0 is greater than 0-1-0. If you later want to reuse that sticky behavior on a sidebar, you should use the class selector rather than adding another ID, keeping the specificity low and the pattern reusable.

Source: developer.mozilla.org