noUnknownPseudoElement

Diagnostic Category: lint/nursery/noUnknownPseudoElement

Since: v1.8.0

Sources:

Same as: stylelint/selector-pseudo-element-no-unknown

Description

Disallow unknown pseudo-element selectors.

For details on known CSS pseudo-elements, see the MDN web docs.

This rule ignores vendor-prefixed pseudo-element selectors.

Examples

Invalid

a::pseudo {}

code-block.css:1:4 lint/nursery/noUnknownPseudoElement ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Unexpected unknown pseudo-elements: pseudo
  
  > 1 │ a::pseudo {}
      │    ^^^^^^
    2 │ 
  
  ℹ See MDN web docs for more details.
  
  ℹ Use a known pseudo-elements instead, such as:
  
  - after
  - backdrop
  - before
  - etc.

a::PSEUDO {}

code-block.css:1:4 lint/nursery/noUnknownPseudoElement ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Unexpected unknown pseudo-elements: PSEUDO
  
  > 1 │ a::PSEUDO {}
      │    ^^^^^^
    2 │ 
  
  ℹ See MDN web docs for more details.
  
  ℹ Use a known pseudo-elements instead, such as:
  
  - after
  - backdrop
  - before
  - etc.

a::element {}

code-block.css:1:4 lint/nursery/noUnknownPseudoElement ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Unexpected unknown pseudo-elements: element
  
  > 1 │ a::element {}
      │    ^^^^^^^
    2 │ 
  
  ℹ See MDN web docs for more details.
  
  ℹ Use a known pseudo-elements instead, such as:
  
  - after
  - backdrop
  - before
  - etc.

Valid

a:before {}

a::before {}

::selection {}

input::-moz-placeholder {}

How to configure

{
  "linter": {
    "rules": {
      "nursery": {
        "noUnknownPseudoElement": "error"
      }
    }
  }
}