selector-max-attribute

セレクター内の属性セレクターの数を制限します。

    [rel="external"] {}
/** ↑
 * This type of selector */

このルールは、属性セレクターの数を数える前に、ネストされたセレクターを解決します。セレクターリストの各セレクターは個別に評価されます。

:not()疑似クラスも個別に評価されます。ルールは引数を独立したセレクターであるかのように処理し、結果はセレクター全体の合計にはカウントされません。

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

オプション

int: 許可される属性セレクターの最大数。

たとえば、2 の場合

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

[type="number"][name="quality"][data-attribute="value"] {}

[type="number"][name="quality"][disabled] {}

[type="number"][name="quality"] {
  & [data-attribute="value"] {}
}

[type="number"][name="quality"] {
  & [disabled] {}
}

[type="number"][name="quality"] {
  & > [data-attribute="value"] {}
}

/* `[type="text"][data-attribute="value"][disabled]` is inside `:not()`, so it is evaluated separately */
input:not([type="text"][data-attribute="value"][disabled]) {}

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

[type="text"] {}

[type="text"][name="message"] {}

[type="text"][disabled]

/* each selector in a selector list is evaluated separately */
[type="text"][name="message"],
[type="number"][name="quality"] {}

/* `[disabled]` is inside `:not()`, so it is evaluated separately */
[type="text"][name="message"]:not([disabled]) {}

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

ignoreAttributes: ["/regex/", /regex/, "non-regex"]

指定

["/^data-my-/", "dir"]

たとえば、0 の場合。

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

[dir] [data-my-attr] {}

[dir] [data-my-other-attr] {}