BaselineLab
0Support

Open states

Distinguish an HTML attribute, the semantic open state, and popover-specific visibility through real interactions.

Read the guide

Ask AI

Open states

Response generated with openai/gpt-5.4-nano. AI can make mistakes. Always review the result.
Current selector:open
Support unknownSpecificity—

Preparing the scenario and its results…

Matches openable elements while open, including details, dialog, select, and picker-supporting inputs while their native UI is showing.

Selector preview

Open details

The open attribute is present and the content is shown.

Closed details

Opening it makes the browser add the attribute and activate :open.

HTML
<section class="open-state-demo details-demo" aria-label="Comparison of open and closed details elements">
  <details open>
    <summary>Open details</summary>
    <p>The open attribute is present and the content is shown.</p>
  </details>
  <details>
    <summary>Closed details</summary>
    <p>Opening it makes the browser add the attribute and activate :open.</p>
  </details>
</section>
CSS
:open {
  outline: 3px solid #f97316;
  outline-offset: 3px;
  background-color: color-mix(in oklch, #f97316 16%, transparent);
}
JS
// The interaction uses native HTML behavior and needs no JavaScript.

Educational guide to open state selectors

Three syntaxes, three different questions

Connect persistent attributes and transient states to the native element that actually defines them.

Back to playground

Mental model

Choose the selector according to the source of state you need to observe.

[open]

Inspect the HTML

Ask whether the open attribute is present; this does not generalize to every element that opens an interface.

:open

Inspect semantic state

Ask whether an element that can open or close is currently open.

:popover-open

Inspect popover visibility

Ask whether an element with popover is currently in the showing state.

open attribute

Observe the HTML-reflected state of details and dialog.

[open]

Elements whose HTML includes the open attribute.

Specificity(0, 1, 0)
Behavior
  • For details and dialog, the open property reflects this boolean attribute.
  • It may remain present until interaction or an API closes the element.
Examples
SelectorSpecificity(0, 1, 0)
[open]
HTML
Matches: <details open>Visible content</details>
<details>Hidden content</details>
SelectorSpecificity(0, 1, 1)
dialog[open]
HTML
Matches: <dialog open>Non-modal dialog</dialog>
<div popover>Popover</div>
Common mistakes
  • It does not select a select whose picker is open.
  • Do not replace it with [popover], which declares a different capability.
Support and compatibility

Attribute selectors are widely available.

Read the full definitionOpens in a new tab

:open state

Group details, dialog, select, and picker-supporting inputs under one semantic pseudo-class.

:open

Elements with an open/closed state that are currently open.

Specificity(0, 1, 0)
Behavior
  • It applies to details, dialog, select, and picker-supporting inputs while their UI is open.
  • It describes state even though it normally agrees with open presence on details and dialog.
Examples
SelectorSpecificity(0, 1, 0)
:open
HTML
Matches: <details open>Visible content</details>
<details>Hidden content</details>
SelectorSpecificity(0, 1, 1)
select:open
HTML
Matches: <select>
  <option>One</option>
  <option>Two</option>
</select>
SelectorSpecificity(0, 2, 1)
input[type="color"]:open
HTML
Matches: <input type="color" value="#f97316">
Common mistakes
  • It does not apply to a popover merely because it is showing.
  • The select and input states are transient and depend on opening their native UI.
Support and compatibility

:open is Baseline Newly Available since May 2026; keep support detection.

Read the full definitionOpens in a new tab

Showing popover

Distinguish declaring a popover from showing it in the top layer.

:popover-open

Popover elements that are currently showing.

Specificity(0, 1, 0)
Behavior
  • The popovertarget button activates the state without JavaScript.
  • When hidden, the element keeps popover but stops matching.
Examples
SelectorSpecificity(0, 2, 0)
[popover]:popover-open
HTML
<button popovertarget="help">Help</button>
Matches: <div id="help" popover>Popover content</div>
Common mistakes
  • [popover] also selects hidden popovers.
  • It is not a variant of :open and does not depend on the open attribute.
Support and compatibility

The state belongs to the Popover API, which is Baseline Newly Available.

Read the full definitionOpens in a new tab