selector-max-compound-selectors

セレクター内の複合セレクターの数を制限します。

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

複合セレクターとは、1つ以上の単純セレクター（タグ、クラス、ID、ユニバーサル、属性）の連鎖です。複合セレクター 完全なセレクターに2つ以上の複合セレクターがある場合、それらはコンバイナー（例： ` `、`+`、`>`）で区切られます。複合セレクターの数を制限したい理由の1つは、SMACSS の書籍に記載されています。

このルールは、セレクターの深さをカウントする前に、ネストされたセレクターを解決します。セレクターリスト内の各セレクターは個別に評価されます。

警告

`:not()`擬似クラスは、内部のセレクターの複雑さに関係なく、1つの複合セレクターとみなされます。このルールは内部のセレクターも処理しますが、メインセレクターとは独立して個別に処理します。

`message` セカンダリオプション は、このルールの引数を受け入れることができます。

オプション

`int`：許可される複合セレクターの最大数。

例：`3`

次のパターンは問題とみなされます。

.foo .bar .baz .lorem {}

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

次のパターンは問題とみなされません。

div {}

.foo div {}

#foo #bar > #baz {}

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

オプションのセカンダリオプション

`ignoreSelectors: ["/regex/", /regex/, "non-regex"]`

一部の複合セレクターを無視します。これは、Vueの`::v-deep`やAngularの`::ng-deep`など、コンバイナーよりも複合セレクターのように振る舞う深いセレクターに役立つ場合があります。

例：`2`。

例

["::v-deep", "/ignored/", ":not"]

次のパターンは問題とみなされます。

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

p a :not(.foo .bar .baz) {}

.foo .bar > .baz.ignored {}

.foo .bar > .ignored.baz {}

次のパターンは問題とみなされません。

.foo::v-deep .bar {}

.foo ::v-deep .baz {}

p a :not(.foo .bar) {}

.foo {
  &.some-ignored-class ::v-deep > .bar {}
}

.foo .bar > .ignored.ignored {}

.foo .bar > .ignored .ignored {}