Warning Multiple ID selectors in one rule
Why chaining several #id selectors together creates brittle, overly specific CSS that's hard to override.
The validator warns when a single selector uses more than one #id, for example #sidebar #widget-3.
Example
/* Flagged: two IDs chained */
#sidebar #widget-3 { padding: 1rem; }
/* Usually clearer */
.sidebar .widget { padding: 1rem; }Why it matters
ID selectors carry very high specificity in CSS's cascade — much higher than a class — so a rule chaining two or more IDs together becomes extremely difficult to override later without resorting to !important or an equally specific (or more specific) selector. Since an element can only have one id anyway, chaining IDs also usually means you could have targeted the element directly with a single, simpler selector, or used classes for anything meant to be reusable or overridable.
Frequently asked questions
Is using ID selectors in CSS always bad?
Not always — a single ID selector is fine for a genuinely one-off element. The issue here specifically is chaining multiple IDs together, which stacks up specificity unnecessarily and usually indicates the selector could be simplified.
What should I use instead for reusable styling?
Classes. They carry lower, more predictable specificity, can be applied to any number of elements, and are the standard building block for reusable CSS.