1 | # selector-max-pseudo-class
|
2 |
|
3 | Limit the number of pseudo-classes in a selector.
|
4 |
|
5 |
|
6 | ```css
|
7 | .foo .bar:first-child:hover {}
|
8 | /* ↑ ↑
|
9 | ↑ ↑
|
10 | 1 2 -- this selector contains two pseudo-classes */
|
11 | ```
|
12 |
|
13 | This rule resolves nested selectors before counting the number of pseudo-classes in a selector. Each selector in a [selector list](https://www.w3.org/TR/selectors4/#selector-list) is evaluated separately.
|
14 |
|
15 | The content of 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 pseudo-classes allowed.
|
20 |
|
21 | For example, with `1`:
|
22 |
|
23 | The following patterns are considered violations:
|
24 |
|
25 |
|
26 | ```css
|
27 | a:first-child:focus {}
|
28 | ```
|
29 |
|
30 |
|
31 | ```css
|
32 | .foo .bar:first-child:hover {}
|
33 | ```
|
34 |
|
35 | The following patterns are _not_ considered violations:
|
36 |
|
37 |
|
38 | ```css
|
39 | a {}
|
40 | ```
|
41 |
|
42 |
|
43 | ```css
|
44 | a:first-child {}
|
45 | ```
|
46 |
|
47 |
|
48 | ```css
|
49 | .foo .bar:first-child {}
|
50 | ```
|