This page is not complete.

This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

The :state CSS pseudo-class represents any custom element with the specified custom state in ElementInternals.states.

custom-element:state(foo) {
  /* Styles to apply when `custom-element` is in the `foo` state */


Syntax not found in DB!


Fill in a simple example that nicely shows a typical usage of the selector, then perhaps some more complex examples (see our guide on how to add code examples for more information).

my code block

And/or include a list of links to useful code samples that live elsewhere:

  • x
  • y
  • z


Specification Status Comment
The definition of 'The :state() selector' in that specification.
Unknown Initial definition.

Browser compatibility

No compatibility data found. Please contribute data for "css.selectors.state" (depth: 1) to the MDN compatibility data repository.

See also