v133 · dom

CSS :open pseudo-class

The :open pseudo-class matches <dialog> and <details> when they are in their open state, and matches <select> and <input> when they are in modes which have a picker and the picker is showing.

concepts

  1. :open

    The :open pseudo matches <details>, <dialog>, and <select> when open. Single hook for the 'is this widget showing?' question.

  2. Transition coordination

    Two identical accordions side by side — one styled with :open, one without. The :open pseudo composes with transition to give <details> smooth expand/collapse without JS.

  3. :has(:open) — ancestor reacts to descendant

    Page dims when any panel is open; toolbar recolours while a <select> picker is showing. Three classic UI patterns expressible in pure CSS through :has() :open.

  4. Form picker indicators

    Date, color, file, and select pickers all light up while their native UA picker is shown — an authoritative signal you couldn't get from focus/click heuristics before.

  5. Settings Accordion

    A multi-section settings panel of native <details> elements. :open drives the chevron rotation, active-dot indicator, row background, and count-badge hide/show — all in CSS, zero JS class toggling. An open-section tracker reads the browser-managed [open] attribute to show which sections are currently expanded.

why it shipped

The :open pseudo-class matches <dialog> and <details> when they are in their open state, and matches <select> and <input> when they are in modes which have a picker and the picker is showing.

references