Skip to main content

selector-nested-pattern

Specify a pattern for the selectors of rules nested within rules.

    a {
      color: orange;
      &:hover { color: pink; } }
/**   ↑
 * This nested selector */

Non-standard selectors (e.g. selectors with Sass or Less interpolation) and selectors of rules nested within at-rules are ignored.

The message secondary option can accept the arguments of this rule.

Options​

string​

Specify a regex string not surrounded with "/".

The selector value will be checked in its entirety. If you'd like to allow for combinators and commas, you must incorporate them into your pattern.

Given:

{
  "selector-nested-pattern": "^&:(?:hover|focus)$"
}

The following patterns are considered problems:

a {
  .bar {}
}
a {
  .bar:hover {}
}
a {
  &:hover,
  &:focus {}
}

The following patterns are not considered problems:

a {
  &:hover {}
}
a {
  &:focus {}
}
a {
  &:hover {}
  &:focus {}
}

Optional secondary options​

splitList​

Split selector lists into individual selectors. Defaults to false.

Given:

{
  "selector-nested-pattern": ["^&:(?:hover|focus)$", { "splitList": true }]
}

The following patterns are considered problems:

a {
  .bar:hover,
  &:focus {}
}

The following patterns are not considered problems:

a {
  &:hover,
  &:focus {}
}