selector-max-compound-selectors
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.
Options
int: Maximum compound selectors allowed.
For example, with 3:
The following patterns are considered violations:
.foo .bar .baz .lorem {}.foo .baz {
& > .bar .lorem {}
}The following patterns are not considered violations:
div {}.foo div {}#foo #bar > #baz {}.foo + div :not (a b ~ c) {} /* `a b ~ c` is inside `:not()`, so it is evaluated separately */