1 | # selector-max-class
|
2 |
|
3 | Limit the number of classes in a selector.
|
4 |
|
5 |
|
6 | ```css
|
7 | div .foo.bar[data-val] > a.baz {}
|
8 | /* ↑ ↑ ↑
|
9 | ↑ ↑ ↑
|
10 | 1 2 3 -- this selector contains three classes */
|
11 | ```
|
12 |
|
13 | This rule resolves nested selectors before counting the number of classes in a selector. Each selector in a [selector list](https://www.w3.org/TR/selectors4/#selector-list) is evaluated separately.
|
14 |
|
15 | 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.
|
16 |
|
17 | ## Options
|
18 |
|
19 | `int`: Maximum classes allowed.
|
20 |
|
21 | For example, with `2`:
|
22 |
|
23 | The following patterns are considered violations:
|
24 |
|
25 |
|
26 | ```css
|
27 | .foo.bar.baz {}
|
28 | ```
|
29 |
|
30 |
|
31 | ```css
|
32 | .foo .bar {
|
33 | & > .baz {}
|
34 | }
|
35 | ```
|
36 |
|
37 | The following patterns are _not_ considered violations:
|
38 |
|
39 |
|
40 | ```css
|
41 | div {}
|
42 | ```
|
43 |
|
44 |
|
45 | ```css
|
46 | .foo .bar {}
|
47 | ```
|
48 |
|
49 |
|
50 | ```css
|
51 | .foo.bar,
|
52 | .lorem.ipsum {} /* each selector in a selector list is evaluated separately */
|
53 | ```
|
54 |
|
55 |
|
56 | ```css
|
57 | .foo .bar :not(.lorem.ipsum) {} /* `.lorem.ipsum` is inside `:not()`, so it is evaluated separately */
|
58 | ```
|