UNPKG

2.28 kBMarkdownView Raw
1# selector-max-attribute
2
3Limit the number of attribute selectors in a selector.
4
5<!-- prettier-ignore -->
6```css
7 [rel="external"] {}
8/** ↑
9 * This type of selector */
10```
11
12This rule resolves nested selectors before counting the number of attribute selectors. Each selector in a [selector list](https://www.w3.org/TR/selectors4/#selector-list) is evaluated separately.
13
14The `: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.
15
16## Options
17
18`int`: Maximum attribute selectors allowed.
19
20For example, with `2`:
21
22The following patterns are considered violations:
23
24<!-- prettier-ignore -->
25```css
26[type="number"][name="quality"][data-attribute="value"] {}
27```
28
29<!-- prettier-ignore -->
30```css
31[type="number"][name="quality"][disabled] {}
32```
33
34<!-- prettier-ignore -->
35```css
36[type="number"][name="quality"] {
37 & [data-attribute="value"] {}
38}
39```
40
41<!-- prettier-ignore -->
42```css
43[type="number"][name="quality"] {
44 & [disabled] {}
45}
46```
47
48<!-- prettier-ignore -->
49```css
50[type="number"][name="quality"] {
51 & > [data-attribute="value"] {}
52}
53```
54
55<!-- prettier-ignore -->
56```css
57/* `[type="text"][data-attribute="value"][disabled]` is inside `:not()`, so it is evaluated separately */
58input:not([type="text"][data-attribute="value"][disabled]) {}
59```
60
61The following patterns are _not_ considered violations:
62
63<!-- prettier-ignore -->
64```css
65[type="text"] {}
66```
67
68<!-- prettier-ignore -->
69```css
70[type="text"][name="message"] {}
71```
72
73<!-- prettier-ignore -->
74```css
75[type="text"][disabled]
76```
77
78<!-- prettier-ignore -->
79```css
80/* each selector in a selector list is evaluated separately */
81[type="text"][name="message"],
82[type="number"][name="quality"] {}
83```
84
85<!-- prettier-ignore -->
86```css
87/* `[disabled]` is inside `:not()`, so it is evaluated separately */
88[type="text"][name="message"]:not([disabled]) {}
89```
90
91## Optional secondary options
92
93### `ignoreAttributes: ["/regex/", /regex/, "string"]`
94
95Given:
96
97```
98["/^my-/", "dir"]
99```
100
101For example, with `0`.
102
103The following patterns are _not_ considered violations:
104
105<!-- prettier-ignore -->
106```css
107[dir] [my-attr] {}
108```
109
110<!-- prettier-ignore -->
111```css
112[dir] [my-other-attr] {}
113```