Skip to main content

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.

Each selector in a selector list is evaluated separately.

note

In versions prior to 17.0.0, this rule would evaluate functional pseudo-classes separately, such as :not() and :is(), and resolve nested selectors (in a nonstandard way) before counting.

Options​

number​

Specify a maximum compound selectors allowed.

Given:

{
  "selector-max-compound-selectors": 3
}

The following pattern is considered a problem:

.foo .bar .baz .lorem {}

The following patterns are not considered problems:

div {}
.foo div {}
#foo #bar > #baz {}

Optional secondary options​

ignoreSelectors​

{ "ignoreSelectors": ["array", "of", "selectors", "/regex/"] }

Ignore some compound selectors. This may be useful for deep selectors like Vue's ::v-deep or Angular's ::ng-deep that behave more like combinators than compound selectors.

Given:

{
  "selector-max-compound-selectors": [
    2,
    { "ignoreSelectors": ["::v-deep", "/ignored/"] }
  ]
}

The following patterns are considered problems:

.foo .bar ::v-deep .baz {}
.foo .bar > .baz.ignored {}
.foo .bar > .ignored.baz {}

The following patterns are not considered problems:

.foo::v-deep .bar {}
.foo ::v-deep .baz {}
.foo .bar > .ignored.ignored {}
.foo .bar > .ignored .ignored {}