CSS :state()

The :state() pseudo-class matches custom elements that expose a named custom state through ElementInternals.states. It is not a general replacement for :hover, :focus or :active.

Syntax

custom-element:state(name) {
  /* styles */
}

Example

my-accordion:state(open) {
  border-color: #2563eb;
}

my-accordion:state(open)::part(panel) {
  display: block;
}

Result:

The selector is meant for Web Components that explicitly expose custom states.

Important note

Use built-in pseudo-classes such as :hover, :focus and :checked for native element states. Use :state() for custom element states.