The list of supported CSS pseudo-elements and pseudo-classes is growing quite large, and it's very easy to miss a typo.

This rule checks each pseudo-element and pseudo-class name to make sure that it is a known CSS pseudo. All vendor-prefixed pseudos are ignored because vendors may add in their own pseudos at any point in time.

Noncompliant Code Example

section:hello(1) { /* Noncompliant: 'hello' isn't a known pseudo-class */
}

section::abc { /* Noncompliant: 'abc' isn't a known pseudo-element */
}

Compliant Solution

section:has(h1, h2, h3, h4, h5, h6) {
}

p::first-line {
  text-transform: uppercase;
}

section:-moz-hello(1) { /* Compliant: 'hello' is a vendor-prefixed pseudo-class */
}

section::-moz-abc { /* Compliant: 'hello' is a vendor-prefixed pseudo-element */
}

List of Known Pseudo-Elements and Pseudo-Classes

active after any  #2
any-link backdrop before
blank checked content
current current default
dir disabled drop
drop empty enabled
first first-child first-letter
first-line first-of-type focus
focus-within fullscreen future
global grammar-error has
host host host-context
hover in-range inactive-selection
indeterminate invalid lang
last-child last-of-type left
link local marker
matches ng-deep not
nth-child nth-column nth-last-child
nth-last-column nth-last-of-type nth-of-type
only-child only-of-type optional
out-of-range past paused
placeholder placeholder-shown playing
read-only read-write region
required right root
scope  #2 scope-context selection
shadow spelling-error target
user-invalid valid visited

stylelint Related Rules