---
# Don't modify this file manually. This file is auto generated from source, and you will lose your changes next time the website is built.
# Head to the `biomejs/biome` repository, and modify the source code in there.

title: noDescendingSpecificity
description: Learn more about noDescendingSpecificity
---
import { Tabs, TabItem } from '@astrojs/starlight/components';

<Tabs>
<TabItem label="CSS" icon="seti:css">
## Summary
- Rule available since: `v1.9.3`
- Diagnostic Category: [`lint/style/noDescendingSpecificity`](/reference/diagnostics#diagnostic-category)
- 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**](/reference/diagnostics#warning).
- Sources: 
  - Same as [`no-descending-specificity`](https://github.com/stylelint/stylelint/blob/main/lib/rules/no-descending-specificity/README.md)

## How to configure
```json title="biome.json"
{
	"linter": {
		"rules": {
			"style": {
				"noDescendingSpecificity": "error"
			}
		}
	}
}

```
## 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

```css
b a { color: red; }
a { color: red; }
```

<pre class="language-text"><code class="language-text">code-block.css:2:1 <a href="https://biomejs.dev/linter/rules/no-descending-specificity">lint/style/noDescendingSpecificity</a> ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━<br /><br />  <strong><span style="color: Orange;">⚠</span></strong> <span style="color: Orange;">Descending specificity selector found. This selector specificity is (0, 0, 1)</span><br />  <br />    <strong>1 │ </strong>b a &#123; color: red; &#125;<br />  <strong><span style="color: Tomato;">&gt;</span></strong> <strong>2 │ </strong>a &#123; color: red; &#125;<br />   <strong>   │ </strong><strong><span style="color: Tomato;">^</span></strong><br />    <strong>3 │ </strong><br />  <br />  <strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">This selector specificity is (0, 0, 2)</span><br />  <br />  <strong><span style="color: Tomato;">&gt;</span></strong> <strong>1 │ </strong>b a &#123; color: red; &#125;<br />   <strong>   │ </strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><br />    <strong>2 │ </strong>a &#123; color: red; &#125;<br />    <strong>3 │ </strong><br />  <br />  <strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">Descending specificity selector may not be applied. Consider rearranging the order of the selectors. See </span><span style="color: lightgreen;"><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity">MDN web docs</a></span><span style="color: lightgreen;"> for more details.</span><br />  <br /></code></pre>

```css
a {
  & > b { color: red; }
}
b { color: red; }
```

<pre class="language-text"><code class="language-text">code-block.css:4:1 <a href="https://biomejs.dev/linter/rules/no-descending-specificity">lint/style/noDescendingSpecificity</a> ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━<br /><br />  <strong><span style="color: Orange;">⚠</span></strong> <span style="color: Orange;">Descending specificity selector found. This selector specificity is (0, 0, 1)</span><br />  <br />    <strong>2 │ </strong>  &amp; &gt; b &#123; color: red; &#125;<br />    <strong>3 │ </strong>&#125;<br />  <strong><span style="color: Tomato;">&gt;</span></strong> <strong>4 │ </strong>b &#123; color: red; &#125;<br />   <strong>   │ </strong><strong><span style="color: Tomato;">^</span></strong><br />    <strong>5 │ </strong><br />  <br />  <strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">This selector specificity is (0, 0, 2)</span><br />  <br />    <strong>1 │ </strong>a &#123;<br />  <strong><span style="color: Tomato;">&gt;</span></strong> <strong>2 │ </strong>  &amp; &gt; b &#123; color: red; &#125;<br />   <strong>   │ </strong>  <strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><br />    <strong>3 │ </strong>&#125;<br />    <strong>4 │ </strong>b &#123; color: red; &#125;<br />  <br />  <strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">Descending specificity selector may not be applied. Consider rearranging the order of the selectors. See </span><span style="color: lightgreen;"><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity">MDN web docs</a></span><span style="color: lightgreen;"> for more details.</span><br />  <br /></code></pre>

```css
:root input {
    color: red;
}
html input {
    color: red;
}
```

<pre class="language-text"><code class="language-text">code-block.css:4:1 <a href="https://biomejs.dev/linter/rules/no-descending-specificity">lint/style/noDescendingSpecificity</a> ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━<br /><br />  <strong><span style="color: Orange;">⚠</span></strong> <span style="color: Orange;">Descending specificity selector found. This selector specificity is (0, 0, 2)</span><br />  <br />    <strong>2 │ </strong>    color: red;<br />    <strong>3 │ </strong>&#125;<br />  <strong><span style="color: Tomato;">&gt;</span></strong> <strong>4 │ </strong>html input &#123;<br />   <strong>   │ </strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><br />    <strong>5 │ </strong>    color: red;<br />    <strong>6 │ </strong>&#125;<br />  <br />  <strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">This selector specificity is (0, 1, 1)</span><br />  <br />  <strong><span style="color: Tomato;">&gt;</span></strong> <strong>1 │ </strong>:root input &#123;<br />   <strong>   │ </strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><br />    <strong>2 │ </strong>    color: red;<br />    <strong>3 │ </strong>&#125;<br />  <br />  <strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">Descending specificity selector may not be applied. Consider rearranging the order of the selectors. See </span><span style="color: lightgreen;"><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity">MDN web docs</a></span><span style="color: lightgreen;"> for more details.</span><br />  <br /></code></pre>

### Valid

```css
a { color: red; }
b a { color: red; }
```

```css
b { color: red; }
a {
  & > b { color: red; }
}
```

```css
a:hover { color: red; }
a { color: red; }
```

```css
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;
}
```

## Related links

- [Disable a rule](/linter/#disable-a-rule)
- [Configure the code fix](/linter#configure-the-code-fix)
- [Rule options](/linter/#rule-options)
- [Source Code](https://github.com/biomejs/biome/blob/main/crates/biome_css_analyze/src/lint/style/no_descending_specificity.rs)
- [Test Cases](https://github.com/biomejs/biome/blob/main/crates/biome_css_analyze/tests/specs/style/noDescendingSpecificity)

</TabItem>
</Tabs>