Skip to main content


Limit the number of compound selectors in a selector.

   div .bar[data-val] > a.baz + .boom > #lorem {}
/* ↑ ↑ ↑ ↑ ↑
↑ ↑ ↑ ↑ ↑
Lv1 Lv2 Lv3 Lv4 Lv5 -- these are compound selectors */

A compound selector is a chain of one or more simple (tag, class, ID, universal, attribute) selectors. If there is more than one compound selector in a complete selector, they will be separated by combinators (e.g. ``, +, >). One reason why you might want to limit the number of compound selectors is described in the SMACSS book.

This rule resolves nested selectors before counting the depth of a selector. Each selector in a selector list is evaluated separately.

:not() is considered one compound selector irrespective to the complexity of the selector inside it. The rule does process that inner selector, but does so separately, independent of the main selector.


int: Maximum compound selectors allowed.

For example, with 3:

The following patterns are considered problems:

.foo .bar .baz .lorem {}
.foo .baz {
& > .bar .lorem {}

The following patterns are not considered problems:

div {}
.foo div {}
#foo #bar > #baz {}
.foo + div :not (a b ~ c) {} /* `a b ~ c` is inside `:not()`, so it is evaluated separately */