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 */




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 for css.selectors.state.
Check for problems with this page or contribute missing data to mdn/browser-compat-data.

See also