Safari 26.5 makes the CSS :open pseudo-class Baseline — style open and closed states with no JavaScript
For years, styling a disclosure widget or a dialog based on whether it was open meant either an attribute selector like details[open] that only covered some cases, or a JavaScript toggle that flipped a class. With Safari 26.5 shipping support in May, the :open pseudo-class is now Baseline — available across all major browser engines — and a whole category of state-tracking JavaScript becomes unnecessary.
What :open matches
The pseudo-class selects any element that has an open and closed state, but only while it's open. That covers more than you might expect: a <details> element while expanded, a <dialog> while showing, and — the part that's genuinely new — a <select> while its dropdown is visible, or an <input> whose picker (a color or date picker, say) is currently open.
That picker coverage is the meaningful upgrade over the old details[open] attribute selector, which only ever applied to elements that expose an open attribute. A native select's dropdown state was never reachable from CSS before; now it is.
Why it became Baseline now
Chromium and Firefox had support in place earlier; Safari was the holdout. Safari 26.5 is mostly a release of fixes, but it added :open, which is what tipped the feature into Baseline Newly available. It's part of the broader Interop work on the <dialog> element and the Popover API — the same effort that's been steadily moving open/closed and popover behavior into the platform rather than leaving it to scripts.
Where it fits in practice
The immediate wins are small but real: animate a chevron when an accordion opens, shift a dialog's backdrop styling without a class toggle, or give an open custom select a distinct border — all in pure CSS, with the state owned by the browser instead of your JavaScript. Because the underlying element manages its own open state, there's no risk of your class and the actual DOM state drifting out of sync, which is the classic bug with hand-rolled toggles.
One note on the related :closed pseudo-class: the working group concluded that where :not(:open) is equivalent, a separate :closed isn't strictly necessary — so for most patterns, :open plus a default style is all you need. If you've got accordions or dialogs in a project, this is a low-risk cleanup you can start on today.