:state()Baseline · Newly available
The :state() CSS pseudo-class matches custom elements based on their custom state, set through the ElementInternals.states API.
Works in the latest version of every major browser, but older devices may not support it yet. Baseline since May 17, 2024.
Browser support
DesktopChrome
1–124Not supported
125+Supportedsince May 14, 2024
Current: 155Edge
12–124Not supported
125+Supportedsince May 17, 2024
Current: 154Firefox
1–125Not supported
126+Supportedsince May 14, 2024
Current: 157Safari
1–17.3Not supported
17.4+Supportedsince Mar 5, 2024
Current: 27MobileChrome Android
18–124Not supported
125+Supportedsince May 14, 2024
Current: 155Firefox Android
4–125Not supported
126+Supportedsince May 14, 2024
Current: 157Safari iOS
1–17.3Not supported
17.4+Supportedsince Mar 5, 2024
Current: 27How to use
Every current browser supports this, but it only became Baseline on May 17, 2024. Use it as a progressive enhancement, or keep a fallback if you support older devices.
Example
Full syntax and examples are on MDN: CustomStateSet.
Feature detection
JS · check before using
if ("ElementInternals" in globalThis && "states" in ElementInternals.prototype) {
// ElementInternals.states is available
}Specification
Sub-features
Support for each part of the feature (13). The overall table above shows when the whole feature works.
| Sub-feature | Chrome | Edge | Firefox | Safari | Chrome Android | Firefox Android | Safari iOS |
|---|---|---|---|---|---|---|---|
| CustomStateSet | 90 | 90 | 126 | 17.4 | 90 | 126 | 17.4 |
| CustomStateSet.@@iterator | 90 | 90 | 126 | 17.4 | 90 | 126 | 17.4 |
| CustomStateSet.add | 90 | 90 | 126 | 17.4 | 90 | 126 | 17.4 |
| CustomStateSet.clear | 90 | 90 | 126 | 17.4 | 90 | 126 | 17.4 |
| CustomStateSet.delete | 90 | 90 | 126 | 17.4 | 90 | 126 | 17.4 |
| CustomStateSet.entries | 90 | 90 | 126 | 17.4 | 90 | 126 | 17.4 |
| CustomStateSet.forEach | 90 | 90 | 126 | 17.4 | 90 | 126 | 17.4 |
| CustomStateSet.has | 90 | 90 | 126 | 17.4 | 90 | 126 | 17.4 |
| CustomStateSet.keys | 90 | 90 | 126 | 17.4 | 90 | 126 | 17.4 |
| CustomStateSet.size | 90 | 90 | 126 | 17.4 | 90 | 126 | 17.4 |
| CustomStateSet.values | 90 | 90 | 126 | 17.4 | 90 | 126 | 17.4 |
| ElementInternals.states | 90 | 90 | 126 | 17.4 | 90 | 126 | 17.4 |
| state | 125 | 125 | 126 | 17.4 | 125 | 126 | 17.4 |