How is CSS specificity calculated for a complex selector?

WHAT THIS TESTS: The interviewer wants to know if you understand specificity as a three-column weight rather than a single integer, and whether you can apply it to a real selector without guessing. Senior engineers should be able to explain why specificity conflicts happen in design systems and how to avoid them.

A GOOD ANSWER COVERS: First, define the three categories in order of weight: ID, CLASS, and TYPE. Second, explain that the final score is not a base-ten number but a tuple like one-two-three, where the leftmost nonzero column wins. Third, walk through the provided selector piece by piece: ul is a type selector, hash nav is an ID selector, the greater-than combinator is ignored, li is a type selector, dot active is a class selector, the next greater-than combinator is ignored, a is a type selector, and the attribute selector href caret equals https is a class-level selector. That yields a specificity of one ID, two CLASS-level selectors, and three TYPE selectors, written as one-two-three. Fourth, explicitly state that combinators such as child, descendant, adjacent sibling, and general sibling add zero specificity, as do the universal selector and anything inside a where pseudo-class.

COMMON WRONG ANSWERS: A common wrong answer is counting combinators as type selectors, which would incorrectly inflate the score. Another red flag is treating specificity as a single number, such as claiming one-zero-zero equals ten and zero-eleven-zero equals eleven, because ID always beats any number of classes. Some candidates also incorrectly rank attribute selectors below classes or claim pseudo-elements belong in the CLASS column. Mentioning inline styles or important as part of the selector score is also a mistake, since those are cascade origin and importance concerns, not selector specificity.

LIKELY FOLLOW-UPS: The interviewer may ask how you would resolve a specificity war in a large codebase, which opens the door to discussions about cascade layers, container queries, or using where to zero out specificity. They might also ask what happens when two selectors have identical specificity, leading to order of appearance and scoping proximity. A third follow-up could be asking you to compare this selector against one with an inline style or an important declaration.

ONE CONCRETE EXAMPLE: For the selector ul hash nav greater-than li dot active greater-than a href caret equals https, the breakdown is: one ID for hash nav, two CLASS-level items for dot active and the attribute selector href caret equals https, and three TYPE items for ul, li, and a. The specificity tuple is one-two-three. If it competed against a rule with just hash nav, the one-two-three rule would win on the CLASS column because both have one ID but the first has two classes versus zero.

Source: developer.mozilla.org