Skip to main content

relative-selector-nesting-notation

Specify explicit or implicit nesting notation for relative selectors.

a { & > b {} }
/** ↑
* This notation */

When a relative selector starts with a combinator (like , >, +, ~), you can either use an explicit nesting selector (&) or rely on implicit nesting behavior. Implicit notation is more concise, but explicit notation can be more readable.

The fix option can automatically fix all of the problems reported by this rule.

Options

"explicit"

Relative selectors must always use explicit nesting selector notation.

{
"relative-selector-nesting-notation": "explicit"
}

The following patterns are considered problems:

a {
b {}
}
a {
> b {}
}

The following patterns are not considered problems:

a {
& b {}
}
a {
& > b {}
}

"implicit"

Relative selectors must always use implicit nesting selector notation.

{
"relative-selector-nesting-notation": "implicit"
}

The following patterns are considered problems:

a {
& b {}
}
a {
& > b {}
}

The following patterns are not considered problems:

a {
b {}
}
a {
> b {}
}
a {
&:hover {}
}