noDescendingSpecificity (CSS)

Language CSS

Summary

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

How to configure

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

Description

Disallow lower-specificity selectors after higher-specificity selectors.

Specificity is the priority score CSS calculates from a selector. When two selectors have the same specificity, the later declaration wins. A selector with higher specificity wins regardless of source order.

A lower-specificity selector placed later can therefore look like an override even though it cannot replace the earlier style. Ordering selectors from lower to higher specificity makes the cascade easier to read.

The rule reports likely conflicts between selectors that end with the same target under the same surrounding rules, such as @media or @layer. It cannot determine every case where two selectors match the same element.

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 be 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 be 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 be applied. Consider rearranging the order of the selectors. See MDN web docs for more details.

1
.a th {
2
  color: red;
3
}
4

5
.a .b .c th {
6
  color: green;
7
}
8

9
.a .b th {
10
  color: blue;
11
}

code-block.css:9:1 lint/style/noDescendingSpecificity ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ Descending specificity selector found. This selector specificity is (0, 2, 1)
  
     7 │ }
     8 │ 
   > 9 │ .a .b th {
       │ ^^^^^^^^
    10 │   color: blue;
    11 │ }
  
  ℹ This selector specificity is (0, 3, 1)
  
    3 │ }
    4 │ 
  > 5 │ .a .b .c th {
      │ ^^^^^^^^^^^
    6 │   color: green;
    7 │ }
  
  ℹ Descending specificity selector may not be 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
/* The rule cannot determine that these selectors target the same elements. */
5
:where(a) :is(b) {
6
    color: blue;
7
}

1
.a th {
2
  color: red;
3
}
4

5
@media print {
6
  .a .b .c th {
7
    color: green;
8
  }
9
}

1
@layer one {
2
  b a { color: green; }
3
}
4

5
@layer two {
6
  a { color: blue; }
7
}