Skip to main content

selector-max-specificity

Limit the specificity of selectors.

.foo, #bar.baz span, #hoo { color: pink; }
/** โ†‘ โ†‘ โ†‘
* Each of these selectors */

Visit the Specificity Calculator for visual representation of selector specificity.

This rule ignores selectors with variable interpolation (#{$var}, @{var}, $(var)).

This rule resolves nested selectors before counting the specificity of a selector. Each selector in a selector list is evaluated separately.

Options#

string: Maximum specificity allowed.

Format is "id,class,type", as laid out in the W3C selector spec.

For example, with "0,2,0":

The following patterns are considered violations:

#foo {}
.foo .baz .bar {}
.foo .baz {
& .bar {}
}
.foo {
color: red;
@nest .baz .bar & {
color: blue;
}
}

The following patterns are not considered violations:

div {}
.foo div {}
.foo div {
& div a {}
}
.foo {
& .baz {}
}
.foo {
color: red;
@nest .baz & {
color: blue;
}
}

Optional secondary options#

ignoreSelectors: ["/regex/", /regex/, "string"]#

Given:

[
"0,2,0",
{
ignoreSelectors: [":global", ":local", "/my-/"]
}
]

The following patterns are not considered violations:

:global(.foo) .bar {}
:local(.foo.bar)
:local(.foo, :global(.bar).baz)

The following patterns are considered violations:

:global(.foo) .bar.baz {}
:local(.foo.bar.baz)
:local(.foo, :global(.bar), .foo.bar.baz)