1 | # selector-max-compound-selectors
|
2 |
|
3 | Limit the number of compound selectors in a selector.
|
4 |
|
5 |
|
6 | ```css
|
7 | div .bar[data-val] > a.baz + .boom > #lorem {}
|
8 | /* ↑ ↑ ↑ ↑ ↑
|
9 | ↑ ↑ ↑ ↑ ↑
|
10 | Lv1 Lv2 Lv3 Lv4 Lv5 -- these are compound selectors */
|
11 | ```
|
12 |
|
13 | A [compound selector](https://www.w3.org/TR/selectors4/#compound) is a chain of one or more simple (tag, class, ID, universal, attribute) selectors. If there is more than one compound selector in a complete selector, they will be separated by combinators (e.g. ``, `+`, `>`). One reason why you might want to limit the number of compound selectors is described in the [SMACSS book](http://smacss.com/book/applicability).
|
14 |
|
15 | This rule resolves nested selectors before counting the depth of a selector. Each selector in a [selector list](https://www.w3.org/TR/selectors4/#selector-list) is evaluated separately.
|
16 |
|
17 | `:not()` is considered one compound selector irrespective to the complexity of the selector inside it. The rule _does_ process that inner selector, but does so separately, independent of the main selector.
|
18 |
|
19 | ## Options
|
20 |
|
21 | `int`: Maximum compound selectors allowed.
|
22 |
|
23 | For example, with `3`:
|
24 |
|
25 | The following patterns are considered violations:
|
26 |
|
27 |
|
28 | ```css
|
29 | .foo .bar .baz .lorem {}
|
30 | ```
|
31 |
|
32 |
|
33 | ```css
|
34 | .foo .baz {
|
35 | & > .bar .lorem {}
|
36 | }
|
37 | ```
|
38 |
|
39 | The following patterns are _not_ considered violations:
|
40 |
|
41 |
|
42 | ```css
|
43 | div {}
|
44 | ```
|
45 |
|
46 |
|
47 | ```css
|
48 | .foo div {}
|
49 | ```
|
50 |
|
51 |
|
52 | ```css
|
53 | #foo #bar > #baz {}
|
54 | ```
|
55 |
|
56 |
|
57 | ```css
|
58 | .foo + div :not (a b ~ c) {} /* `a b ~ c` is inside `:not()`, so it is evaluated separately */
|
59 | ```
|