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
grammar-error has host
host host-context hover
in-range inactive-selection indeterminate
invalid lang last-child
last-of-type left link
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