New Rule: no-invalid-pseudo-selectors

[BHyeonKim]

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

/* 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

• I am willing to submit a pull request to implement this rule.

AI acknowledgment

• I did not use AI to generate this issue report.
• (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

[BHyeonKim]

I assumed no-unmatchable-selectors already covered this, based on its name. After checking the implementation, it only handles :nth-*() selectors with impossible AnPlusB values — it doesn't validate whether a pseudo-class/pseudo-element name actually exists. Hence this proposal.