eslint / eslint/css

New Rule: no-invalid-pseudo-selectors

Open
#551 1 comment 0 reactions 1 assignee Claimed by @BHyeonKim View on GitHub
feature
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.