noUnknownPseudoClass (CSS)
Language CSS
Summary
Section titled “Summary”- Rule available since:
v1.8.0 - Diagnostic Category:
lint/correctness/noUnknownPseudoClass - This rule is recommended, meaning it is enabled by default.
- This rule doesn’t have a fix.
- The default severity of this rule is error.
- Sources:
- Same as
selector-pseudo-class-no-unknown
- Same as
How to configure
Section titled “How to configure”{ "linter": { "rules": { "correctness": { "noUnknownPseudoClass": "error" } } }}Description
Section titled “Description”Disallow unrecognized pseudo-class selectors.
A pseudo-class begins with : and selects an element in a particular state or position, as
in :hover or :first-child. Vendor-prefixed pseudo-classes are allowed. See
MDN’s pseudo-class reference.
SCSS limitations
Section titled “SCSS limitations”Pseudo-class names containing SCSS interpolation are ignored because the emitted name cannot be determined statically.
Examples
Section titled “Examples”Invalid
Section titled “Invalid”a:unknown {}code-block.css:1:3 lint/correctness/noUnknownPseudoClass ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
✖ Unexpected unknown pseudo-class unknown.
> 1 │ a:unknown {}
│ ^^^^^^^
2 │
ℹ Browsers ignore a rule when its selector contains an unknown pseudo-class, so the styles are never applied.
ℹ Check the spelling of the pseudo-class, or replace it with one that exists.
ℹ See MDN web docs for more details.
a:UNKNOWN {}code-block.css:1:3 lint/correctness/noUnknownPseudoClass ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
✖ Unexpected unknown pseudo-class UNKNOWN.
> 1 │ a:UNKNOWN {}
│ ^^^^^^^
2 │
ℹ Browsers ignore a rule when its selector contains an unknown pseudo-class, so the styles are never applied.
ℹ Check the spelling of the pseudo-class, or replace it with one that exists.
ℹ See MDN web docs for more details.
a:hoverr {}code-block.css:1:3 lint/correctness/noUnknownPseudoClass ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
✖ Unexpected unknown pseudo-class hoverr.
> 1 │ a:hoverr {}
│ ^^^^^^
2 │
ℹ Browsers ignore a rule when its selector contains an unknown pseudo-class, so the styles are never applied.
ℹ Check the spelling of the pseudo-class, or replace it with one that exists.
ℹ See MDN web docs for more details.
a:hover {}a:focus {}:not(p) {}input:-moz-placeholder {}Options
Section titled “Options”ignore
Section titled “ignore”Lists additional pseudo-class names to allow, without regard to letter case. Defaults to an empty list.
{ "linter": { "rules": { "correctness": { "noUnknownPseudoClass": { "level": "on", "options": { "ignore": [ "custom-pseudo-class" ] } } } } }}a:custom-pseudo-class {}Related links
Section titled “Related links”Sponsored by
Copyright (c) 2023-present Biome Developers and Contributors.