Info Deep, long selector chains

Why long descendant-combinator chains like .a .b .c .d .e make CSS fragile and hard to maintain.

The validator flags selectors with four or more combinators (spaces, >, +, or ~) chained together, as an informational nudge to reconsider the structure.

Example

/* Flagged: five levels deep */
.page .sidebar .widget .list .item { color: gray; }

/* Simpler and more resilient to markup changes */
.widget-item { color: gray; }

Why it matters

A long descendant chain ties your CSS tightly to a specific HTML structure — reorganize the markup even slightly (wrap something in an extra <div>, for instance) and the selector stops matching. Deep chains also accumulate specificity, which compounds the same override problems as chained ID selectors, and they're simply harder to read and debug than a single, well-named class applied directly to the element that needs the style.

Frequently asked questions

How deep is too deep?

There's no hard rule, but as a practical guideline, most maintainable CSS rarely needs more than two or three combinators. If you're chaining four or more, it's usually a sign the target element could be given its own class instead.

Does this apply to CSS methodologies like BEM?

BEM (Block__Element--Modifier) is essentially a naming convention designed to avoid this problem — it favors flat, single-class selectors over deep nesting, which is exactly the direction this warning is nudging toward.