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