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 {}
}