src/content/docs/linter/rules/no-descending-specificity.mdx
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){
"linter": {
"rules": {
"style": {
"noDescendingSpecificity": "error"
}
}
}
}
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.
b a { color: red; }
a { color: red; }
a {
& > b { color: red; }
}
b { color: red; }
:root input {
color: red;
}
html input {
color: red;
}
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;
}