UNPKG

2.82 kBMarkdownView Raw
1# selector-max-type
2
3Limit the number of type selectors in a selector.
4
5<!-- prettier-ignore -->
6```css
7 a {}
8/** ↑
9 * This type of selector */
10```
11
12This rule resolves nested selectors before counting the number of type 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 type selectors allowed.
19
20For example, with `2`:
21
22The following patterns are considered violations:
23
24<!-- prettier-ignore -->
25```css
26div a span {}
27```
28
29<!-- prettier-ignore -->
30```css
31div a {
32 & span {}
33}
34```
35
36<!-- prettier-ignore -->
37```css
38div a {
39 & > a {}
40}
41```
42
43The following patterns are _not_ considered violations:
44
45<!-- prettier-ignore -->
46```css
47div {}
48```
49
50<!-- prettier-ignore -->
51```css
52div a {}
53```
54
55<!-- prettier-ignore -->
56```css
57.foo div a {}
58```
59
60<!-- prettier-ignore -->
61```css
62div.foo a {}
63```
64
65<!-- prettier-ignore -->
66```css
67/* each selector in a selector list is evaluated separately */
68div,
69a span {}
70```
71
72<!-- prettier-ignore -->
73```css
74/* `span` is inside `:not()`, so it is evaluated separately */
75div a .foo:not(span) {}
76```
77
78## Optional secondary options
79
80### `ignore: ["child", "compounded", "descendant", "next-sibling"]`
81
82#### `"child"`
83
84Discount child type selectors.
85
86For example, with `2`:
87
88The following patterns are _not_ considered violations:
89
90<!-- prettier-ignore -->
91```css
92div span > a {}
93```
94
95<!-- prettier-ignore -->
96```css
97#bar div span > a {}
98```
99
100#### `"compounded"`
101
102Discount compounded type selectors -- i.e. type selectors chained with other selectors.
103
104For example, with `2`:
105
106The following patterns are _not_ considered violations:
107
108<!-- prettier-ignore -->
109```css
110div span a.foo {}
111```
112
113<!-- prettier-ignore -->
114```css
115div span a#bar {}
116```
117
118#### `"descendant"`
119
120Discount descendant type selectors.
121
122For example, with `2`:
123
124The following patterns are _not_ considered violations:
125
126<!-- prettier-ignore -->
127```css
128.foo div span a {}
129```
130
131<!-- prettier-ignore -->
132```css
133#bar div span a {}
134```
135
136#### `"next-sibling"`
137
138Discount next-sibling type selectors.
139
140For example, with `2`:
141
142The following patterns are _not_ considered violations:
143
144<!-- prettier-ignore -->
145```css
146div a + span {}
147```
148
149<!-- prettier-ignore -->
150```css
151#bar + div + span + a + span {}
152```
153
154### `ignoreTypes: ["/regex/", /regex/, "string"]`
155
156Given:
157
158```
159["/^my-/", "custom"]
160```
161
162For example, with `2`.
163
164The following patterns are _not_ considered violations:
165
166<!-- prettier-ignore -->
167```css
168div a custom {}
169```
170
171<!-- prettier-ignore -->
172```css
173div a my-type {}
174```
175
176<!-- prettier-ignore -->
177```css
178div a my-other-type {}
179```