Skip to content
Biome
Docs Blog Playground

noDescendingSpecificity

Diagnostic Category: lint/nursery/noDescendingSpecificity

Since: v1.9.3

Sources:

Disallow a lower specificity selector from coming after a higher specificity selector.

This rule prohibits placing selectors with lower specificity after selectors with higher specificity. By maintaining the order of the source and specificity as consistently as possible, it enhances readability.

Examples

Section titled Examples

Invalid

Section titled Invalid
b a { color: red; }
a { color: red; }
code-block.css:2:1 lint/nursery/noDescendingSpecificity ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Descending specificity selector found. This selector specificity is (0, 0, 1)
  
    1 │ b a { color: red; }
  > 2 │ a { color: red; }
      │ ^
    3 │ 
  
  ℹ This selector specificity is (0, 0, 2)
  
  > 1 │ b a { color: red; }
      │ ^^^
    2 │ a { color: red; }
    3 │ 
  
  ℹ Descending specificity selector may not applied. Consider rearranging the order of the selectors. See MDN web docs for more details.
  
a {
  & > b { color: red; }
}
b { color: red; }
code-block.css:4:1 lint/nursery/noDescendingSpecificity ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Descending specificity selector found. This selector specificity is (0, 0, 1)
  
    2 │   & > b { color: red; }
    3 │ }
  > 4 │ b { color: red; }
      │ ^
    5 │ 
  
  ℹ This selector specificity is (0, 0, 2)
  
    1 │ a {
  > 2 │   & > b { color: red; }
      │   ^^^^^
    3 │ }
    4 │ b { color: red; }
  
  ℹ Descending specificity selector may not applied. Consider rearranging the order of the selectors. See MDN web docs for more details.
  
:root input {
    color: red;
}
html input {
    color: red;
}
code-block.css:4:1 lint/nursery/noDescendingSpecificity ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Descending specificity selector found. This selector specificity is (0, 0, 2)
  
    2 │     color: red;
    3 │ }
  > 4 │ html input {
      │ ^^^^^^^^^^
    5 │     color: red;
    6 │ }
  
  ℹ This selector specificity is (0, 1, 1)
  
  > 1 │ :root
 input {
      │ ^^^^^^^^^^^
    2 │     color: red;
    3 │ }
  
  ℹ Descending specificity selector may not applied. Consider rearranging the order of the selectors. See MDN web docs for more details.

Valid

Section titled Valid
a { color: red; }
b a { color: red; }
b { color: red; }
a {
  & > b { color: red; }
}
a:hover { color: red; }
a { color: red; }
a b {
    color: red;
}
/* This selector is overwritten by the one above it, but this is not an error because the rule only evaluates it as a compound selector */
:where(a) :is(b) {
    color: blue;
}
Section titled Related links