:open

The :open CSS pseudo-class allows a popover to be styled, but only when it is being shown.

# Syntax

:open

# Example

The following example transitions the popover in from the bottom of the viewport, rather than have it appear in the center:

p[popover] {
  transform: translateY(60vh);
  transition: transform 0.6s;
}

p[popover]:open {
  transform: translateY(0vh);
}

# Browser compatibility

• The Popover API is planned for launch in Chrome 110, available in stable in early February 2023 (check the Chrome Roadmap for updates).
• It is enabled by default in Chrome Canary for local testing.
• Register for the Origin Trial if you want to test it in a production environment. Read Getting started with Chrome's origin trials for more information.
• There is a polyfill available at https://github.com/oddbird/popup-polyfill.

# See also

• The Popover API
• Pop-ups: They're making a resurgence!, by Jhey Tompkins
• Chrome Platform Status: The Popover API
• Open UI: Popover API Explainer