selector-max-pseudo-class

Limit the number of pseudo-classes in a selector.

.foo .bar:first-child:hover {}
/*       ↑           ↑
         ↑           ↑
         1           2 -- this selector contains two pseudo-classes */

Each selector in a selector list is evaluated separately.

note

In versions prior to 17.0.0, this rule would evaluate functional pseudo-classes separately, such as :not() and :is(), and resolve nested selectors (in a nonstandard way) before counting.

Options

number

Specify a maximum pseudo-classes allowed.

Given:

{
  "selector-max-pseudo-class": 1
}

The following patterns are considered problems:

a:first-child:focus {}

.foo .bar:first-child:hover {}

The following patterns are not considered problems:

a {}

a:first-child {}

.foo .bar:first-child {}