:popover-open CSS Pseudo Class

The :popover-open pseudo-class targets an element that is currently displayed as an open popover, meaning it has been activated via the Popover API and is visible to the user. This pseudo-class is part of the modern HTML Popover feature and allows you to style a popover only while it is open, without needing JavaScript or additional state classes.

It applies to elements that use the popover attribute (such as popover, popover="auto", or popover="manual"). When the popover is shown - typically triggered by a button using popovertarget - the element matches :popover-open until it is closed.

What :popover-open Does

• Targets only visible popovers
• Automatically updates when the popover opens or closes
• Removes the need for JavaScript-based state tracking
• Works seamlessly with native browser behavior

This makes it ideal for styling transitions, animations, or visual emphasis while the popover is active.

Basic Example

<button popovertarget="infoBox">Show Info</button>

<div id="infoBox" popover>
  This is a popover message.
</div>

:popover-open {
  background-color: #f0f8ff;
  border: 2px solid #4a90e2;
  padding: 1rem;
}

In this example, the popover only receives the styling while it is open.

Targeting a Specific Popover

You can combine the selector with an element type or ID:

div:popover-open {
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

This ensures the styles only apply to <div> elements that are currently open as popovers.

Transitions and Animations

You can use transitions for smoother visual effects:

[popover] {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

:popover-open {
  opacity: 1;
  transform: scale(1);
}

This creates a subtle zoom-and-fade animation when the popover opens.

Commonly Used With

• The button element using the popovertarget attribute
• The popover HTML attribute
• CSS properties such as opacity, transform, and box-shadow

Accessibility Notes

• Popovers automatically manage focus when opened.
• Clicking outside the popover or pressing Esc closes it (for popover="auto").
• Screen readers correctly interpret popover state changes when implemented natively.