Skip to main content

selector-disallowed-list

Specify a list of disallowed selectors.

    .foo > .bar {}
/** ↑
 * This is selector */

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

Options​

array|string|regexp: ["array", "of", "selectors", /or/, "/regex/"]|"selector"|"/regex/"|/regex/

If a string is surrounded with "/" (e.g. "/\.foo/"), it is interpreted as a regular expression.

Given:

["a > .foo", "/\\[data-.+]/"]

The following patterns are considered problems:

a > .foo {}
a[data-auto="1"] {}
.foo, [data-auto="1"] {}

The following patterns are not considered problems:

.foo {}
a
>
.foo {}
.bar > a > .foo {}
.data-auto {}
a[href] {}

Optional secondary options​

splitList: true | false (default: false)​

Split selector lists into individual selectors.

For example, with true.

Given:

[".foo", { "splitList": true }]

The following pattern is considered a problem:

.bar, .foo {}

The following pattern is not considered a problem:

.bar .foo {}

ignore: ["inside-block"]​

Ignore selectors that are inside a block.

Given:

[".foo", { "ignore": ["inside-block"] }]

The following pattern is not considered a problem:

.bar {
  .foo {}
}

ignore: ["keyframe-selectors"]​

Ignore keyframe selectors.

Given:

["/from/", { "ignore": ["keyframe-selectors"] }]

The following pattern is not considered a problem:

@keyframes fade-in {
  from {}
}