noDescendingSpecificity

Summary

Rule available since: v1.9.3
Diagnostic Category: lint/style/noDescendingSpecificity
This rule is recommended, which means is enabled by default.
This rule doesn’t have a fix.
The default severity of this rule is warning.
Sources:
- Same as stylelint/no-descending-specificity

Description

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

Source order is important in CSS, and when two selectors have the same specificity, the one that occurs last will take priority. However, the situation is different when one of the selectors has a higher specificity. In that case, source order does not matter: the selector with higher specificity will win out even if it comes first.

The clashes of these two mechanisms for prioritization, source order and specificity, can cause some confusion when reading stylesheets. If a selector with higher specificity comes before the selector it overrides, we have to think harder to understand it, because it violates the source order expectation. Stylesheets are most legible when overriding selectors always come after the selectors they override. That way both mechanisms, source order and specificity, work together nicely.

This rule enforces that practice as best it can, reporting fewer errors than it should. It cannot catch every actual overriding selector, but it can catch certain common mistakes.

Examples

Invalid

1
b a { color: red; }
2
a { color: red; }

code-block.css:2:1 lint/style/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.

1
a {
2
  & > b { color: red; }
3
}
4
b { color: red; }

code-block.css:4:1 lint/style/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.

1
:root input {
2
    color: red;
3
}
4
html input {
5
    color: red;
6
}

code-block.css:4:1 lint/style/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

1
a { color: red; }
2
b a { color: red; }

1
b { color: red; }
2
a {
3
  & > b { color: red; }
4
}

1
a:hover { color: red; }
2
a { color: red; }

1
a b {
2
    color: red;
3
}
4
/* 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 */
5
:where(a) :is(b) {
6
    color: blue;
7
}

How to configure

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