:open
The :open CSS pseudo-class matches elements that have open states, like <details>, <dialog>, or <select>, based on their state.
Overview
The :open CSS pseudo-class matches elements that have open states, like <details>, <dialog>, or <select>, based on their state.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 133 | 133 | 136 | 26.5 | 133 | 26.5 | |
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 (122)
Implementation note
- The selector is recognized, but has no effect.
Notes 3 item(s)
Limitation
- This browser only partially implements this feature
Removed
- This feature was removed in a later browser version (122)
Implementation note
- The selector is recognized, but has no effect.
Notes 3 item(s)
Limitation
- This browser only partially implements this feature
Removed
- This feature was removed in a later browser version (122)
Implementation note
- The selector is recognized, but has no effect.
Syntax
CSS
details:open {
border-color: #2563eb;
}
details:open > summary {
font-weight: bold;
color: #1e40af;
}
dialog:open {
animation: fade-in 0.2s ease;
}Live demo
Use cases
Using :open
The :open CSS pseudo-class matches elements that have open states, like <details>, <dialog>, or <select>, based on their state.
Cautions
- Limited browser support. Check compatibility before use.
Accessibility
- Make sure visual changes are conveyed appropriately to assistive technology.
Related links
Powered by web-features