.config/coc/extensions/node_modules/coc-prettier/node_modules/stylelint/lib/rules/selector-max-compound-selectors/README.md

   1 # selector-max-compound-selectors
   2
   3 Limit the number of compound selectors in a selector.
   4
   5 ```css
   6    div .bar[data-val] > a.baz + .boom > #lorem {}
   7 /* ↑   ↑                ↑       ↑       ↑
   8    |   |                |       |       |
   9   Lv1 Lv2              Lv3     Lv4     Lv5  -- these are compound selectors */
  10 ```
  11
  12 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](https://smacss.com/book/applicability).
  13
  14 This rule resolves nested selectors before calculating the depth of a selector.
  15
  16 `: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.
  17
  18 ## Options
  19
  20 `int`: Maximum compound selectors allowed.
  21
  22 For example, with `3`:
  23
  24 The following patterns are considered violations:
  25
  26 ```css
  27 .foo .bar .baz .lorem {}
  28 ```
  29
  30 ```css
  31 .foo .baz {
  32   & > .bar .lorem {}
  33 }
  34 ```
  35
  36 The following patterns are *not* considered violations:
  37
  38 ```css
  39 div {}
  40 ```
  41
  42 ```css
  43 .foo div {}
  44 ```
  45
  46 ```css
  47 #foo #bar > #baz {}
  48 ```
  49
  50 ```css
  51 .foo + div :not (a b ~ c) {} /* `a b ~ c` is inside :not() and is processed separately */
  52 ```