New Rule: no-invalid-pseudo-selectors
- Dominant language
- JavaScript
- Stars
- 308
- Forks
- 44
- Avg merge
- 2d 6h
- Merged PRs (30d)
- 18
Description
### Rule details
Warns when a selector uses a pseudo-class or pseudo-element name that doesn't exist in the CSS specifications (e.g. a typo like `:hoverr` or `::befor`) — an unknown pseudo-class/element causes the entire selector (and rule) to be silently dropped by browsers.
### What type of rule is this?
Warns about a potential problem
### Example code
```css
/* WARNING: 'hoverr' and 'befor' are typos, not real pseudo-classes/pseudo-elements */
a:hoverr {
color: red;
}
p::befor {
content: "";
}
/* OK */
a:hover {
color: red;
}
p::before {
content: "";
}
```
### Prior Art
stylelint covers this with two separate rules:
- https://stylelint.io/user-guide/rules/selector-pseudo-class-no-unknown
- https://stylelint.io/user-guide/rules/selector-pseudo-element-no-unknown
### Participation
- [x] I am willing to submit a pull request to implement this rule.
### AI acknowledgment
- [ ] I did not use AI to generate this issue report.
- [x] (If the above is not checked) I have reviewed the AI-generated content before submitting.
### Additional comments
Disclosure: I'm a participant of [open source contribution program OSSCA](https://github.com/eslint-ossca)
Contributor guide
Assessment
This issue has not been assessed yet.