CSS :open Pseudo-Class Now Baseline 2026, Unifying Open-State Styling Across Browsers
The CSS :open pseudo-class has reached Baseline 2026 status, becoming available across all major modern browsers as of May 2026. It provides a single, semantic selector for styling UI elements — such as dialogs, select pickers, date inputs, and disclosure widgets — that are currently in an open state. Previously, developers had to rely on different selectors for different elements, and native picker states often lacked a consistent CSS target altogether. The new pseudo-class can be combined with :has() to let parent containers respond to a child element's open state without JavaScript. Developers are advised to include fallbacks like the [open] attribute selector for older browsers and use @supports selector(:open) when the enhancement lacks a simple alternative.
This is an AI-generated summary. ShortSingh links to the original source for the complete article.

Discussion (0)
Log in to join the discussion and vote.
Log in