noExcessiveSelectorComplexity (CSS)

Language CSS

Summary

Rule available since: v2.6.7
Diagnostic Category: lint/nursery/noExcessiveSelectorComplexity
This rule doesn’t have a fix.
The default severity of this rule is warning.
Sources:
- Same as css/selector-complexity

How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "nursery": {
5
        "noExcessiveSelectorComplexity": "error"
6
      }
7
    }
8
  }
9
}

Description

Limit how complex selectors can be, and disallow chosen parts of selectors.

Long selectors that mix many IDs, element names, attributes, and pseudo-classes are hard to read and hard to override. They also tie styles closely to the structure of the page, so small changes to the HTML can break them.

This rule lets you set a maximum for each kind of selector part, and list combinators, pseudo-classes, pseudo-elements, attributes, and attribute operators that aren’t allowed. The rule does nothing until at least one option is set.

Each selector in a comma-separated list is checked on its own. For example, #a, #b contains two selectors with one ID each.

Selectors inside a pseudo-class such as :not(), :is(), or :has() are checked as separate selectors, and don’t count toward the selector that contains them. For example, #a:not(#b) contains two selectors with one ID each.

Nested selectors are checked as written, without combining them with the selectors of their parent rules.

Examples

Invalid

1
{
2
  "linter": {
3
    "rules": {
4
      "nursery": {
5
        "noExcessiveSelectorComplexity": {
6
          "level": "on",
7
          "options": {
8
            "maxIds": 1,
9
            "disallowPseudoClasses": [
10
              "hover"
11
            ]
12
          }
13
        }
14
      }
15
    }
16
  }
17
}

1
#main #sidebar {}

code-block.css:1:1 lint/nursery/noExcessiveSelectorComplexity ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ This selector has too many ID selectors: it has 2, but the limit is 1.
  
  > 1 │ #main #sidebar {}
      │ ^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Complex selectors are hard to read and override, and break easily when the page structure changes.
  
  ℹ Simplify the selector, for example by giving the element a class and selecting it directly.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.

1
button:hover {}

code-block.css:1:7 lint/nursery/noExcessiveSelectorComplexity ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ The pseudo-class :hover isn't allowed.
  
  > 1 │ button:hover {}
      │       ^^^^^^
    2 │ 
  
  ℹ The rule's configuration disallows this pseudo-class in selectors.
  
  ℹ Rewrite the selector without it, for example by giving the element a class and selecting it directly.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.

Valid

1
#main .sidebar,
2
#footer {}
3

4
#main:not(#sidebar) {}
5

6
button:focus {}

Options

`maxIds`

Default: no limit

The maximum number of ID selectors, such as #main, allowed in a single selector.

1
{
2
  "linter": {
3
    "rules": {
4
      "nursery": {
5
        "noExcessiveSelectorComplexity": {
6
          "level": "on",
7
          "options": {
8
            "maxIds": 1
9
          }
10
        }
11
      }
12
    }
13
  }
14
}

Invalid

1
#main > #sidebar {}

code-block.css:1:1 lint/nursery/noExcessiveSelectorComplexity ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ This selector has too many ID selectors: it has 2, but the limit is 1.
  
  > 1 │ #main > #sidebar {}
      │ ^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Complex selectors are hard to read and override, and break easily when the page structure changes.
  
  ℹ Simplify the selector, for example by giving the element a class and selecting it directly.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.

Valid

1
#main .sidebar {}

`maxTypes`

Default: no limit

The maximum number of type selectors allowed in a single selector. A type selector matches elements by their tag name, such as div or a.

1
{
2
  "linter": {
3
    "rules": {
4
      "nursery": {
5
        "noExcessiveSelectorComplexity": {
6
          "level": "on",
7
          "options": {
8
            "maxTypes": 2
9
          }
10
        }
11
      }
12
    }
13
  }
14
}

Invalid

1
ul li a {}

code-block.css:1:1 lint/nursery/noExcessiveSelectorComplexity ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ This selector has too many type selectors: it has 3, but the limit is 2.
  
  > 1 │ ul li a {}
      │ ^^^^^^^
    2 │ 
  
  ℹ Complex selectors are hard to read and override, and break easily when the page structure changes.
  
  ℹ Simplify the selector, for example by giving the element a class and selecting it directly.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.

Valid

1
li.item a {}

`maxAttributes`

Default: no limit

The maximum number of attribute selectors, such as [type="text"], allowed in a single selector.

1
{
2
  "linter": {
3
    "rules": {
4
      "nursery": {
5
        "noExcessiveSelectorComplexity": {
6
          "level": "on",
7
          "options": {
8
            "maxAttributes": 1
9
          }
10
        }
11
      }
12
    }
13
  }
14
}

Invalid

1
[name="email"][type="text"] {}

code-block.css:1:1 lint/nursery/noExcessiveSelectorComplexity ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ This selector has too many attribute selectors: it has 2, but the limit is 1.
  
  > 1 │ [name="email"][type="text"] {}
      │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Complex selectors are hard to read and override, and break easily when the page structure changes.
  
  ℹ Simplify the selector, for example by giving the element a class and selecting it directly.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.

Valid

1
input[type="text"] {}

`maxPseudoClasses`

Default: no limit

The maximum number of pseudo-classes, such as :hover or :first-child, allowed in a single selector. Pseudo-elements such as ::before don’t count, including the older single-colon forms :before, :after, :first-line, and :first-letter.

1
{
2
  "linter": {
3
    "rules": {
4
      "nursery": {
5
        "noExcessiveSelectorComplexity": {
6
          "level": "on",
7
          "options": {
8
            "maxPseudoClasses": 1
9
          }
10
        }
11
      }
12
    }
13
  }
14
}

Invalid

1
li:first-child:hover {}

code-block.css:1:1 lint/nursery/noExcessiveSelectorComplexity ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ This selector has too many pseudo-classes: it has 2, but the limit is 1.
  
  > 1 │ li:first-child:hover {}
      │ ^^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Complex selectors are hard to read and override, and break easily when the page structure changes.
  
  ℹ Simplify the selector, for example by giving the element a class and selecting it directly.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.

Valid

1
a:hover::before {}

`maxUniversals`

Default: no limit

The maximum number of universal selectors (*) allowed in a single selector.

1
{
2
  "linter": {
3
    "rules": {
4
      "nursery": {
5
        "noExcessiveSelectorComplexity": {
6
          "level": "on",
7
          "options": {
8
            "maxUniversals": 1
9
          }
10
        }
11
      }
12
    }
13
  }
14
}

Invalid

1
* > * {}

code-block.css:1:1 lint/nursery/noExcessiveSelectorComplexity ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ This selector has too many universal selectors: it has 2, but the limit is 1.
  
  > 1 │ * > * {}
      │ ^^^^^
    2 │ 
  
  ℹ Complex selectors are hard to read and override, and break easily when the page structure changes.
  
  ℹ Simplify the selector, for example by giving the element a class and selecting it directly.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.

Valid

1
.list > * {}

`maxCompounds`

Default: no limit

The maximum number of compound selectors allowed in a single selector. A compound selector is a group of selectors written together without spaces or combinators. For example, nav a.link:hover has two compound selectors: nav and a.link:hover.

1
{
2
  "linter": {
3
    "rules": {
4
      "nursery": {
5
        "noExcessiveSelectorComplexity": {
6
          "level": "on",
7
          "options": {
8
            "maxCompounds": 2
9
          }
10
        }
11
      }
12
    }
13
  }
14
}

Invalid

1
nav ul a {}

code-block.css:1:1 lint/nursery/noExcessiveSelectorComplexity ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ This selector has too many compound selectors: it has 3, but the limit is 2.
  
  > 1 │ nav ul a {}
      │ ^^^^^^^^
    2 │ 
  
  ℹ Complex selectors are hard to read and override, and break easily when the page structure changes.
  
  ℹ Simplify the selector, for example by giving the element a class and selecting it directly.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.

Valid

1
nav a.link:hover {}

`maxCombinators`

Default: no limit

The maximum number of combinators allowed in a single selector. A combinator is the symbol between two compound selectors: a space, >, +, ~, or ||.

1
{
2
  "linter": {
3
    "rules": {
4
      "nursery": {
5
        "noExcessiveSelectorComplexity": {
6
          "level": "on",
7
          "options": {
8
            "maxCombinators": 1
9
          }
10
        }
11
      }
12
    }
13
  }
14
}

Invalid

1
.menu > .item > a {}

code-block.css:1:1 lint/nursery/noExcessiveSelectorComplexity ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ This selector has too many combinators: it has 2, but the limit is 1.
  
  > 1 │ .menu > .item > a {}
      │ ^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Complex selectors are hard to read and override, and break easily when the page structure changes.
  
  ℹ Simplify the selector, for example by giving the element a class and selecting it directly.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.

Valid

1
.menu > .item {}

`disallowCombinators`

Default: []

Combinators that aren’t allowed. Accepted values are " " (a space, which selects elements inside another element), ">", "+", "~", and "||".

1
{
2
  "linter": {
3
    "rules": {
4
      "nursery": {
5
        "noExcessiveSelectorComplexity": {
6
          "level": "on",
7
          "options": {
8
            "disallowCombinators": [
9
              ">"
10
            ]
11
          }
12
        }
13
      }
14
    }
15
  }
16
}

Invalid

1
.menu > .item {}

code-block.css:1:7 lint/nursery/noExcessiveSelectorComplexity ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ The combinator > isn't allowed.
  
  > 1 │ .menu > .item {}
      │       ^
    2 │ 
  
  ℹ The rule's configuration disallows this combinator in selectors.
  
  ℹ Rewrite the selector without it, for example by giving the element a class and selecting it directly.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.

Valid

1
.menu .item {}

`disallowPseudoClasses`

Default: []

Pseudo-classes that aren’t allowed, written without the leading colon. Names are compared without regard to letter case.

1
{
2
  "linter": {
3
    "rules": {
4
      "nursery": {
5
        "noExcessiveSelectorComplexity": {
6
          "level": "on",
7
          "options": {
8
            "disallowPseudoClasses": [
9
              "hover"
10
            ]
11
          }
12
        }
13
      }
14
    }
15
  }
16
}

Invalid

1
a:not(.active):hover {}

code-block.css:1:15 lint/nursery/noExcessiveSelectorComplexity ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ The pseudo-class :hover isn't allowed.
  
  > 1 │ a:not(.active):hover {}
      │               ^^^^^^
    2 │ 
  
  ℹ The rule's configuration disallows this pseudo-class in selectors.
  
  ℹ Rewrite the selector without it, for example by giving the element a class and selecting it directly.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.

Valid

1
a:not(.active) {}

`disallowPseudoElements`

Default: []

Pseudo-elements that aren’t allowed, written without the leading colons. Names are compared without regard to letter case. The older single-colon forms :before, :after, :first-line, and :first-letter are checked as well.

1
{
2
  "linter": {
3
    "rules": {
4
      "nursery": {
5
        "noExcessiveSelectorComplexity": {
6
          "level": "on",
7
          "options": {
8
            "disallowPseudoElements": [
9
              "before"
10
            ]
11
          }
12
        }
13
      }
14
    }
15
  }
16
}

Invalid

1
a:before {}

code-block.css:1:2 lint/nursery/noExcessiveSelectorComplexity ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ The pseudo-element :before isn't allowed.
  
  > 1 │ a:before {}
      │  ^^^^^^^
    2 │ 
  
  ℹ The rule's configuration disallows this pseudo-element in selectors.
  
  ℹ Rewrite the selector without it, for example by giving the element a class and selecting it directly.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.

Valid

1
input::placeholder {}

`disallowAttributes`

Default: []

Attribute names that aren’t allowed in attribute selectors. Names must match exactly, including letter case.

1
{
2
  "linter": {
3
    "rules": {
4
      "nursery": {
5
        "noExcessiveSelectorComplexity": {
6
          "level": "on",
7
          "options": {
8
            "disallowAttributes": [
9
              "class"
10
            ]
11
          }
12
        }
13
      }
14
    }
15
  }
16
}

Invalid

1
[class*="button"] {}

code-block.css:1:2 lint/nursery/noExcessiveSelectorComplexity ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ The attribute class isn't allowed.
  
  > 1 │ [class*="button"] {}
      │  ^^^^^
    2 │ 
  
  ℹ The rule's configuration disallows this attribute in selectors.
  
  ℹ Rewrite the selector without it, for example by giving the element a class and selecting it directly.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.

Valid

1
input[type="text"] {}

`disallowAttributeMatchers`

Default: []

Operators that aren’t allowed in attribute selectors. Accepted values are "=", "~=", "|=", "^=", "$=", and "*=".

1
{
2
  "linter": {
3
    "rules": {
4
      "nursery": {
5
        "noExcessiveSelectorComplexity": {
6
          "level": "on",
7
          "options": {
8
            "disallowAttributeMatchers": [
9
              "*="
10
            ]
11
          }
12
        }
13
      }
14
    }
15
  }
16
}

Invalid

1
[class*="button"] {}

code-block.css:1:7 lint/nursery/noExcessiveSelectorComplexity ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ The attribute operator *= isn't allowed.
  
  > 1 │ [class*="button"] {}
      │       ^^
    2 │ 
  
  ℹ The rule's configuration disallows this attribute operator in selectors.
  
  ℹ Rewrite the selector without it, for example by giving the element a class and selecting it directly.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.

Valid

1
[class="button"] {}

noExcessiveSelectorComplexity (CSS)

Summary

How to configure

Description

Examples

Invalid

Valid

Options

maxIds

Invalid

Valid

maxTypes

Invalid

Valid

maxAttributes

Invalid

Valid

maxPseudoClasses

Invalid

Valid

maxUniversals

Invalid

Valid

maxCompounds

Invalid

Valid

maxCombinators

Invalid

Valid

disallowCombinators

Invalid

Valid

disallowPseudoClasses

Invalid

Valid

disallowPseudoElements

Invalid

Valid

disallowAttributes

Invalid

Valid

disallowAttributeMatchers

Invalid

Valid

See Also

Related links

`maxIds`

`maxTypes`

`maxAttributes`

`maxPseudoClasses`

`maxUniversals`

`maxCompounds`

`maxCombinators`

`disallowCombinators`

`disallowPseudoClasses`

`disallowPseudoElements`

`disallowAttributes`

`disallowAttributeMatchers`