noPseudoElementInFunctionalPseudoClass (CSS)

Language CSS

Summary

Rule available since: v2.6.5
Diagnostic Category: lint/nursery/noPseudoElementInFunctionalPseudoClass
This rule doesn’t have a fix.
The default severity of this rule is error.

How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "nursery": {
5
        "noPseudoElementInFunctionalPseudoClass": "error"
6
      }
7
    }
8
  }
9
}

Description

Disallow pseudo-elements inside :is(), :where(), :not() and :has().

These pseudo-classes only accept selectors that match elements. A pseudo-element such as ::before isn’t allowed inside them, so browsers drop the selector that contains it: :is() and :where() ignore that argument, while :not() and :has() make the whole selector invalid. Either way, the styles never apply to the pseudo-element.

The rule also checks the older :matches(), and reports the single-colon forms :before, :after, :first-line and :first-letter, because browsers treat them as pseudo-elements too.

Other functional pseudo-classes and pseudo-elements, such as :host() and ::slotted(), and pseudo-classes whose name uses SCSS interpolation, aren’t checked.

Examples

Invalid

1
.card:is(.featured::before) {
2
  content: "";
3
}

code-block.css:1:19 lint/nursery/noPseudoElementInFunctionalPseudoClass ━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ This pseudo-element can't be used inside :is().
  
  > 1 │ .card:is(.featured::before) {
      │                   ^^^^^^^^
    2 │   content: "";
    3 │ }
  
  ℹ Pseudo-elements aren't valid inside :is(), :where(), :not() or :has(). Browsers drop the invalid selector, so these styles never apply to the pseudo-element.
  
  ℹ To style the pseudo-element, put it at the end of the selector, outside the pseudo-class, for example .card:is(.featured, .pinned)::before.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.

1
li:not(::marker) {
2
  color: red;
3
}

code-block.css:1:8 lint/nursery/noPseudoElementInFunctionalPseudoClass ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ This pseudo-element can't be used inside :not().
  
  > 1 │ li:not(::marker) {
      │        ^^^^^^^^
    2 │   color: red;
    3 │ }
  
  ℹ Pseudo-elements aren't valid inside :is(), :where(), :not() or :has(). Browsers drop the invalid selector, so these styles never apply to the pseudo-element.
  
  ℹ To style the pseudo-element, put it at the end of the selector, outside the pseudo-class, for example .card:is(.featured, .pinned)::before.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.

Valid

1
.card:is(.featured, .pinned)::before {
2
  content: "";
3
}
4

5
li:not(.done)::marker {
6
  color: red;
7
}