セレクターの最大特異度

セレクターの特異度を制限します。

    .foo, #bar.baz span, #hoo { color: pink; }
/** ↑     ↑              ↑
 * Each of these selectors */

セレクター特異度の視覚的表現については、特異度計算機をご覧ください。

このルールは、変数補間（#{$var}、@{var}、$(var)）を含むセレクターを無視します。

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

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

オプション

string: 許可される最大特異度。

フォーマットは、W3C セレクター仕様に記載されているように、"id,class,type" です。

例えば、"0,2,0" の場合

以下のパターンは問題とみなされます

#foo {}

.foo .baz .bar {}

.foo .baz {
  & .bar {}
}

.foo {
  color: red;
  @nest .baz .bar & {
    color: blue;
  }
}

以下のパターンは問題とみなされ*ません*

div {}

.foo div {}

.foo div {
  & div a {}
}

.foo {
  & .baz {}
}

.foo {
  color: red;
  @nest .baz & {
    color: blue;
  }
}

指定されている場合

[
  "0,2,0",
  {
    "ignoreSelectors": [":global", ":local", "/^my-/"]
  }
]

以下のパターンは問題とみなされ*ません*

:global(.foo) .bar {}

:local(.foo.bar) {}

:local(.foo, :global(.bar).baz) {}

my-element.foo.bar {}

以下のパターンは問題とみなされます

:global(.foo) .bar.baz {}

:local(.foo.bar.baz) {}

:local(.foo, :global(.bar), .foo.bar.baz) {}

my-element.foo.bar.baz {}