#selector-max-type

Limit the number of type selectors in a selector.

    a {}
/** ↑
 * This type of selector */

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

The :not() pseudo-class is also evaluated separately. The rule processes the argument as if it were an independent selector, and the result does not count toward the total for the entire selector.

#Options

int: Maximum type selectors allowed.

For example, with 2:

The following patterns are considered violations:

div a span {}
div a {
  & span {}
}
div a {
  & > a {}
}

The following patterns are not considered violations:

div {}
div a {}
.foo div a {}
div.foo a {}
/* each selector in a selector list is evaluated separately */
div,
a span {}
/* `span` is inside `:not()`, so it is evaluated separately */
div a .foo:not(span) {}

The following patterns are not considered violations:

#Optional secondary options

#ignore: ["child", "compounded", "descendant"]

#"child"

Discount child type selectors.

For example, with 2:

The following patterns are not considered violations:

div span > a {}
#bar div span > a {}

#"compounded"

Discount compounded type selectors -- i.e. type selectors chained with other selectors.

For example, with 2:

The following patterns are not considered violations:

div span a.foo {}
div span a#bar {}

#"descendant"

Discount descendant type selectors.

For example, with 2:

The following patterns are not considered violations:

.foo div span a {}
#bar div span a {}

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

Given:

["/^my-/", "custom"]

For example, with 2.

The following patterns are not considered violations:

div a custom {}
div a my-type {}
div a my-other-type {}