stylelint
  • Docs
  • Demo
  • GitHub
  • Twitter

›Rules

Intro

  • Home

User guide

  • Getting started
  • Configuration
  • Rules

    • About rules
    • Combining rules
    • Using regex in rules
    • List of rules

    Usage

    • Command Line Interface (CLI)
    • Node.js API
    • PostCSS plugin
    • Options

    Integrations

    • Editor integrations
    • Task runner integrations
    • Other integrations
  • Ignoring code
  • Errors & warnings

Developer guide

  • Working on rules
  • Working on syntaxes
  • Writing plugins
  • Writing formatters
  • Writing system tests
  • Writing processors

Maintainer guide

  • Managing issues
  • Managing pull requests
  • Performing releases

About

  • Linting
  • Syntaxes
  • Semantic versioning
  • Vision
  • Contributing
  • Changelog

Rules

  • alpha-value-notation
  • at-rule-allowed-list
  • at-rule-blacklist
  • at-rule-disallowed-list
  • at-rule-empty-line-before
  • at-rule-name-case
  • at-rule-name-newline-after
  • at-rule-name-space-after
  • at-rule-no-unknown
  • at-rule-no-vendor-prefix
  • at-rule-property-required-list
  • at-rule-property-requirelist
  • at-rule-semicolon-newline-after
  • at-rule-semicolon-space-before
  • at-rule-whitelist
  • block-closing-brace-empty-line-before
  • block-closing-brace-newline-after
  • block-closing-brace-newline-before
  • block-closing-brace-space-after
  • block-closing-brace-space-before
  • block-no-empty
  • block-opening-brace-newline-after
  • block-opening-brace-newline-before
  • block-opening-brace-space-after
  • block-opening-brace-space-before
  • color-function-notation
  • color-hex-case
  • color-hex-length
  • color-named
  • color-no-hex
  • color-no-invalid-hex
  • comment-empty-line-before
  • comment-no-empty
  • comment-pattern
  • comment-whitespace-inside
  • comment-word-blacklist
  • comment-word-disallowed-list
  • custom-media-pattern
  • custom-property-empty-line-before
  • custom-property-pattern
  • declaration-bang-space-after
  • declaration-bang-space-before
  • declaration-block-no-duplicate-custom-properties
  • declaration-block-no-duplicate-properties
  • declaration-block-no-redundant-longhand-properties
  • declaration-block-no-shorthand-property-overrides
  • declaration-block-semicolon-newline-after
  • declaration-block-semicolon-newline-before
  • declaration-block-semicolon-space-after
  • declaration-block-semicolon-space-before
  • declaration-block-single-line-max-declarations
  • declaration-block-trailing-semicolon
  • declaration-colon-newline-after
  • declaration-colon-space-after
  • declaration-colon-space-before
  • declaration-empty-line-before
  • declaration-no-important
  • declaration-property-unit-allowed-list
  • declaration-property-unit-blacklist
  • declaration-property-unit-disallowed-list
  • declaration-property-unit-whitelist
  • declaration-property-value-allowed-list
  • declaration-property-value-blacklist
  • declaration-property-value-disallowed-list
  • declaration-property-value-whitelist
  • font-family-name-quotes
  • font-family-no-duplicate-names
  • font-family-no-missing-generic-family-keyword
  • font-weight-notation
  • function-allowed-list
  • function-blacklist
  • function-calc-no-invalid
  • function-calc-no-unspaced-operator
  • function-comma-newline-after
  • function-comma-newline-before
  • function-comma-space-after
  • function-comma-space-before
  • function-disallowed-list
  • function-linear-gradient-no-nonstandard-direction
  • function-max-empty-lines
  • function-name-case
  • function-parentheses-newline-inside
  • function-parentheses-space-inside
  • function-url-no-scheme-relative
  • function-url-quotes
  • function-url-scheme-allowed-list
  • function-url-scheme-blacklist
  • function-url-scheme-disallowed-list
  • function-url-scheme-whitelist
  • function-whitelist
  • function-whitespace-after
  • hue-degree-notation
  • indentation
  • keyframe-declaration-no-important
  • keyframes-name-pattern
  • length-zero-no-unit
  • linebreaks
  • max-empty-lines
  • max-line-length
  • max-nesting-depth
  • media-feature-colon-space-after
  • media-feature-colon-space-before
  • media-feature-name-allowed-list
  • media-feature-name-blacklist
  • media-feature-name-case
  • media-feature-name-disallowed-list
  • media-feature-name-no-unknown
  • media-feature-name-no-vendor-prefix
  • media-feature-name-value-allowed-list
  • media-feature-name-value-whitelist
  • media-feature-name-whitelist
  • media-feature-parentheses-space-inside
  • media-feature-range-operator-space-after
  • media-feature-range-operator-space-before
  • media-query-list-comma-newline-after
  • media-query-list-comma-newline-before
  • media-query-list-comma-space-after
  • media-query-list-comma-space-before
  • no-descending-specificity
  • no-duplicate-at-import-rules
  • no-duplicate-selectors
  • no-empty-first-line
  • no-empty-source
  • no-eol-whitespace
  • no-extra-semicolons
  • no-invalid-double-slash-comments
  • no-missing-end-of-source-newline
  • no-unknown-animations
  • number-leading-zero
  • number-max-precision
  • number-no-trailing-zeros
  • property-allowed-list
  • property-blacklist
  • property-case
  • property-disallowed-list
  • property-no-unknown
  • property-no-vendor-prefix
  • property-whitelist
  • rule-empty-line-before
  • selector-attribute-brackets-space-inside
  • selector-attribute-name-disallowed-list
  • selector-attribute-operator-allowed-list
  • selector-attribute-operator-blacklist
  • selector-attribute-operator-disallowed-list
  • selector-attribute-operator-space-after
  • selector-attribute-operator-space-before
  • selector-attribute-operator-whitelist
  • selector-attribute-quotes
  • selector-class-pattern
  • selector-combinator-allowed-list
  • selector-combinator-blacklist
  • selector-combinator-disallowed-list
  • selector-combinator-space-after
  • selector-combinator-space-before
  • selector-combinator-whitelist
  • selector-descendant-combinator-no-non-space
  • selector-id-pattern
  • selector-list-comma-newline-after
  • selector-list-comma-newline-before
  • selector-list-comma-space-after
  • selector-list-comma-space-before
  • selector-max-attribute
  • selector-max-class
  • selector-max-combinators
  • selector-max-compound-selectors
  • selector-max-empty-lines
  • selector-max-id
  • selector-max-pseudo-class
  • selector-max-specificity
  • selector-max-type
  • selector-max-universal
  • selector-nested-pattern
  • selector-no-qualifying-type
  • selector-no-vendor-prefix
  • selector-pseudo-class-allowed-list
  • selector-pseudo-class-blacklist
  • selector-pseudo-class-case
  • selector-pseudo-class-disallowed-list
  • selector-pseudo-class-no-unknown
  • selector-pseudo-class-parentheses-space-inside
  • selector-pseudo-class-whitelist
  • selector-pseudo-element-allowed-list
  • selector-pseudo-element-blacklist
  • selector-pseudo-element-case
  • selector-pseudo-element-colon-notation
  • selector-pseudo-element-disallowed-list
  • selector-pseudo-element-no-unknown
  • selector-pseudo-element-whitelist
  • selector-type-case
  • selector-type-no-unknown
  • shorthand-property-no-redundant-values
  • string-no-newline
  • string-quotes
  • time-min-milliseconds
  • unicode-bom
  • unit-allowed-list
  • unit-blacklist
  • unit-case
  • unit-disallowed-list
  • unit-no-unknown
  • unit-whitelist
  • value-keyword-case
  • value-list-comma-newline-after
  • value-list-comma-newline-before
  • value-list-comma-space-after
  • value-list-comma-space-before
  • value-list-max-empty-lines
  • value-no-vendor-prefix
Edit

selector-max-compound-selectors

Limit the number of compound selectors in a selector.

   div .bar[data-val] > a.baz + .boom > #lorem {}
/* ↑   ↑                ↑       ↑       ↑
   ↑   ↑                ↑       ↑       ↑
  Lv1 Lv2              Lv3     Lv4     Lv5  -- these are compound selectors */

A compound selector is a chain of one or more simple (tag, class, ID, universal, attribute) selectors. If there is more than one compound selector in a complete selector, they will be separated by combinators (e.g. ``, +, >). One reason why you might want to limit the number of compound selectors is described in the SMACSS book.

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

:not() is considered one compound selector irrespective to the complexity of the selector inside it. The rule does process that inner selector, but does so separately, independent of the main selector.

Options

int: Maximum compound selectors allowed.

For example, with 3:

The following patterns are considered violations:

.foo .bar .baz .lorem {}
.foo .baz {
  & > .bar .lorem {}
}

The following patterns are not considered violations:

div {}
.foo div {}
#foo #bar > #baz {}
.foo + div :not (a b ~ c) {} /* `a b ~ c` is inside `:not()`, so it is evaluated separately */
← selector-max-combinatorsselector-max-empty-lines →
  • Options