Skip to main content

selector-class-pattern

Specify a pattern for class selectors.

    .foo, #bar.baz span, #hoo[disabled] { color: pink; }
/** ↑ ↑
* These class selectors */

This rule ignores non-outputting Less mixin definitions and called Less mixins.

Escaped selectors (e.g. .u-size-11\/12\@sm) are parsed as escaped twice (e.g. .u-size-11\\/12\\@sm). Your RegExp should account for that.

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

Options

string

Specify a regex string not surrounded with "/".

The selector value after . will be checked. No need to include . in your pattern.

Given:

{
"selector-class-pattern": "foo-[a-z]+"
}

The following patterns are considered problems:

.foop {}
.foo-BAR {}
div > #zing + .foo-BAR {}

The following patterns are not considered problems:

.foo-bar {}
div > #zing + .foo-bar {}
#foop {}
[foo='bar'] {}

Optional secondary options

resolveNestedSelectors

This option will resolve nested selectors with & interpolation. Defaults to false.

Given the string:

{
"selector-class-pattern": ["^[A-Z]+$", { "resolveNestedSelectors": true }]
}

The following patterns are considered problems:

.A {
&__B {} /* resolved to ".A__B" */
}

The following patterns are not considered problems:

.A {
&B {} /* resolved to ".AB" */
}