selector-max-attribute.md

Pattern: Too many attribute selectors

Issue: -

Description

This rule resolves nested selectors before counting the number of attribute selectors. Each selector in a selector list is evaluated separately.

The :not() pseudo-class is also evaluated separately. The rule processes the argument as if it were an independent selector, and the result does not count toward the total for the entire selector.

Examples

int: Maximum attribute selectors allowed.

For example, with 2:

The following patterns are considered violations:

[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]) {}

The following patterns are not considered violations:

[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]) {}

Configuration

ignoreAttributes: ["/regex/", "string"]

Given:

["/^some-/", "dir"]

For example, with 0.

The following patterns are not considered violations:

[dir] [some-attr] {}

[dir] [some-other-attr] {}

Further Reading

• stylelint - selector-max-attribute