Newly availableNewly available. Verify your target environments before adopting.
Web Components Newly available

:state()

The :state() CSS pseudo-class matches custom elements based on their custom state, set through the ElementInternals.states API.

Web Components

Overview

The :state() CSS pseudo-class matches custom elements based on their custom state, set through the ElementInternals.states API.

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
:state
125
125
126
17.4
125
17.4
DOM API
CustomStateSet

The CustomStateSet interface of the Document Object Model stores a list of states for an autonomous custom element, and allows states to be added and removed from the set.
90
90
126
17.4
90
17.4
@@iterator

[Symbol.iterator]
90
90
126
17.4
90
17.4
add

The add method of the CustomStateSet interface adds value representing a custom state to the CustomStateSet.
90
90
126
17.4
90
17.4
clear

The clear() method of the CustomStateSet interface removes all elements from the CustomStateSet object.
90
90
126
17.4
90
17.4
delete

The delete() method of the CustomStateSet interface deletes a single value from the CustomStateSet.
90
90
126
17.4
90
17.4
entries

The entries method of the CustomStateSet interface returns a new iterator object, containing an array of [value,value] for each element in the CustomStateSet.
90
90
126
17.4
90
17.4
forEach

The forEach() method of the CustomStateSet interface executes a provided function for each value in the CustomStateSet object.
90
90
126
17.4
90
17.4
has

The has() method of the CustomStateSet interface returns a Boolean asserting whether an element is present with the given value.
90
90
126
17.4
90
17.4
keys

The keys() method of the CustomStateSet interface is an alias for CustomStateSet.values.
90
90
126
17.4
90
17.4
size

The size property of the CustomStateSet interface returns the number of values in the CustomStateSet.
90
90
126
17.4
90
17.4
values

The values() method of the CustomStateSet interface returns a new iterator object that yields the values for each element in the CustomStateSet object in insertion order.
90
90
126
17.4
90
17.4
states

The states read-only property of the ElementInternals interface returns a CustomStateSet representing the possible states of the custom element.
90
90
126
17.4
90
17.4
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (125)
Implementation note
  • Uses a dashed-ident (such as `:--foo`) instead of `:state()`.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (125)
Implementation note
  • Uses a dashed-ident (such as `:--foo`) instead of `:state()`.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (125)
Implementation note
  • Uses a dashed-ident (such as `:--foo`) instead of `:state()`.

Syntax

CSS 
my-toggle:state(checked) {
  background-color: #3498db;
  color: white;
}
my-toggle:state(disabled) {
  opacity: 0.5;
}

Live demo

:state(checked) style

CSS:state(checked) style demo.

PreviewFullscreen

:state(disabled) style

CSS:state(disabled) style demo.

PreviewFullscreen

:state(loading) style

CSS:state(loading) style demo.

PreviewFullscreen

Use cases

  • Using :state()

    The :state() CSS pseudo-class matches custom elements based on their custom state, set through the ElementInternals.states API.

Cautions

  • May not be supported in older browsers.

Accessibility

  • Make sure visual changes are conveyed appropriately to assistive technology.

Related links

Powered by web-features