demo · v133

:open

A single pseudo-class that matches whenever a <details>, <dialog>, or <select> is currently open — no JS toggle classes, no [open] attribute selectors per element.

details

toggle me

when open, this card flips to stone with a shadow — driven purely by details:open.

select

when the listbox is open, select:open flips the closed control to blue.

dialog

This dialog has dialog:open rules that give it a hard 8×8 shadow while shown.

checking support…

the CSS

details:open  { background: var(--bg-stone); box-shadow: 2px 2px 0 black; }
select:open   { background: blue; color: white; }
dialog:open   { box-shadow: 8px 8px 0 black; }

see also