CSS :popover-open Pseudo-Class

CSS :popover-open Pseudo-Class

The CSS :popover-open pseudo-class selects an HTML element with the popover attribute while it is in the showing state. It allows developers to style visible popovers without adding or removing CSS classes with JavaScript.

:popover-open Syntax

selector:popover-open {
  property: value;
}

The :popover-open pseudo-class matches a popover element while it is being shown.

Basic Example

[popover]:popover-open {
  border: 2px solid #006699;
}

Adds a blue border to any open popover.

ID Selector

#help-popover:popover-open {
  background-color: #eaf6fc;
}

Applies a light blue background to the open popover with the ID help-popover.

Class Selector

.info-popover:popover-open {
  box-shadow: 0 4px 16px rgb(0 0 0 / 20%);
}

Adds a shadow while an element with the info-popover class is shown as a popover.

No Parentheses

The :popover-open pseudo-class does not accept arguments and is written without parentheses.

How :popover-open Works

The browser manages the showing and hidden states of elements using the HTML Popover API. The :popover-open pseudo-class matches only while the element is in the showing state.

HTML Example

<button type="button" popovertarget="help-popover">Show Help</button>
<div id="help-popover" popover>
  <p>Use the navigation menu to browse CSS tutorials.</p>
</div>

CSS Example

#help-popover:popover-open {
  padding: 15px;
  border: 2px solid #006699;
  background-color: #eaf6fc;
}

When the button opens the popover, the browser matches :popover-open and applies the styling.

Hidden State

When the popover is hidden, it no longer matches :popover-open. The browser also removes it from the top layer.

Automatic State Changes

The selector updates automatically when the popover opens or closes. JavaScript is not required for basic popover controls or state styling.

Attribute Presence Is Not Enough

An element with a popover attribute does not match :popover-open merely because the attribute exists. The popover must be showing.

The popover Attribute

The HTML popover attribute makes an element available for the browser's popover behavior.

Basic Popover

<div id="example-popover" popover>
  <p>This is a popover.</p>
</div>

The element is initially hidden until a control or script opens it.

Opening the Popover

<button type="button" popovertarget="example-popover">Open Popover</button>

The popovertarget attribute associates the button with the popover by its ID.

Styling an Open Popover

[popover]:popover-open {
  border: 2px solid #006699;
  border-radius: 6px;
}

The selector applies only while a popover is showing.

Popover Attribute vs. Pseudo-Class

[popover] {
  padding: 15px;
}
[popover]:popover-open {
  background-color: #eaf6fc;
}

The attribute selector matches elements with the popover attribute regardless of their current state. The pseudo-class matches only open popovers.

Not a Dialog Replacement

Popovers are generally nonmodal. They do not automatically make the rest of the document inert or move keyboard focus into the popover.

Popover Types

The popover attribute supports different values that control how the popover opens and closes.

Popover Values

Auto Popover

<div id="auto-popover" popover="auto">
  <p>Auto popover content.</p>
</div>

An auto popover can generally be dismissed by pressing Escape or clicking outside it.

Manual Popover

<div id="manual-popover" popover="manual">
  <p>Manual popover content.</p>
</div>

A manual popover does not close automatically through ordinary light-dismiss interactions.

Hint Popover

<div id="hint-popover" popover="hint">
  <p>Additional information.</p>
</div>

The hint value is intended for transient information. Support and dismissal details can vary across browser versions.

Same Pseudo-Class

All supported popover types match :popover-open while they are in the showing state.

Popover Controls

HTML provides declarative attributes for opening, closing, and toggling popovers without JavaScript.

Toggle Button

<button type="button" popovertarget="menu-popover">Toggle Menu</button>
<div id="menu-popover" popover>
  <p>Menu content</p>
</div>

A button with popovertarget toggles the associated popover by default.

Explicit Show Button

<button type="button" popovertarget="menu-popover" popovertargetaction="show">Show Menu</button>

The show action requests that the popover open.

Explicit Hide Button

<button type="button" popovertarget="menu-popover" popovertargetaction="hide">Close Menu</button>

The hide action requests that the popover close.

Toggle Action

<button type="button" popovertarget="menu-popover" popovertargetaction="toggle">Toggle Menu</button>

The toggle action alternates between the showing and hidden states.

CSS State Styling

#menu-popover:popover-open {
  border-color: #006699;
}

The selector matches whenever the popover is showing, regardless of which supported control opened it.

Top Layer and Backdrop

Showing popovers are placed in the browser's top layer, allowing them to appear above ordinary page content without relying on large z-index values.

Top Layer

The top layer is managed by the browser. A popover shown in the top layer is not positioned according to the ordinary stacking order of page elements.

Popover Backdrop

[popover]::backdrop {
  background-color: rgb(0 0 0 / 25%);
}

The ::backdrop pseudo-element can style the backdrop associated with a popover in the top layer. A backdrop does not make a popover modal.

Open Popover Styling

[popover]:popover-open {
  border: 2px solid #006699;
  box-shadow: 0 6px 20px rgb(0 0 0 / 20%);
}

Applies a border and shadow while the popover is shown.

Default Positioning

Browsers provide default popover positioning, often centered in the viewport. Custom CSS or CSS anchor positioning can be used when a different placement is needed.

Stacking Order

Because popovers use the top layer, ordinary z-index values do not determine their stacking order relative to other top-layer elements.

Transitions and Animations

The :popover-open pseudo-class can be used to define styles for popover entrance and exit transitions.

Open State

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

Defines the visible appearance of an open popover.

Closed State

[popover] {
  opacity: 0;
  transform: scale(0.95);
}

Defines the intended hidden appearance. The browser normally hides closed popovers, so a complete entrance or exit transition requires additional CSS.

Starting Styles

@starting-style {
  [popover]:popover-open {
    opacity: 0;
    transform: scale(0.95);
  }
}

The @starting-style rule can provide initial values for an opening transition in supporting browsers.

Discrete Transitions

[popover] {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.2s, transform 0.2s, display 0.2s allow-discrete, overlay 0.2s allow-discrete;
}
[popover]:popover-open {
  opacity: 1;
  transform: scale(1);
}
@starting-style {
  [popover]:popover-open {
    opacity: 0;
    transform: scale(0.95);
  }
}

Transitions involving display and overlay can allow the browser to retain the popover during its exit animation in supporting browsers.

Reduced Motion

@media (prefers-reduced-motion: reduce) {
  [popover] {
    transition: none;
  }
}

Disables the transitions for users who prefer reduced motion.

JavaScript and Popovers

The HTML Popover API includes methods and events for controlling popovers programmatically.

Show a Popover

const popover = document.getElementById("help-popover");
popover.showPopover();

The showPopover() method requests that the element enter the showing state.

Hide a Popover

popover.hidePopover();

The hidePopover() method hides a showing popover.

Toggle a Popover

popover.togglePopover();

The togglePopover() method alternates between showing and hidden states.

Check the Current State

const isOpen = popover.matches(":popover-open");
console.log(isOpen);

The matches() method can determine whether an element currently matches :popover-open.

Toggle Event

popover.addEventListener("toggle", (event) => {
  console.log("Popover state:", event.newState);
});

The toggle event reports state changes after a popover opens or closes.

Declarative Controls First

For basic open, close, and toggle behavior, HTML attributes such as popovertarget are often sufficient without JavaScript.

Related Pseudo-Classes

The :popover-open pseudo-class describes a popover's showing state. Other pseudo-classes describe different kinds of open or interactive states.

Comparison

Popover vs. Open

[popover]:popover-open {
  border-color: #006699;
}
details:open {
  border-color: #2e7d32;
}

The first selector targets showing popovers. The second targets open <details> elements.

Popover vs. Modal

Showing a popover does not automatically make it modal. Modal dialogs use different interaction rules and can match :modal.

Popover vs. Focus

A popover can remain open while focus moves between elements. The showing state is not equivalent to focus.

:popover-open Specificity

The :popover-open pseudo-class contributes a specificity of 0-1-0, like other standard pseudo-classes.

Specificity Examples

Specificity Example

[popover] {
  border: 1px solid #ccc;
}
[popover]:popover-open {
  border-color: #006699;
}

When both rules match and other cascade factors are equal, the :popover-open rule takes precedence because it has greater specificity.

Attribute and Pseudo-Class

The [popover] attribute selector and :popover-open pseudo-class each contribute 0-1-0 to specificity.

Practical Uses

The :popover-open pseudo-class can provide visual styling for open popovers without requiring JavaScript-managed classes.

Open Popover Border

[popover]:popover-open {
  border: 2px solid #006699;
}

Adds a border to a showing popover.

Popover Shadow

[popover]:popover-open {
  box-shadow: 0 6px 20px rgb(0 0 0 / 20%);
}

Creates a shadow around an open popover.

Popover Background

[popover]:popover-open {
  background-color: #eaf6fc;
}

Applies a light blue background while the popover is showing.

Style a Container

.popover-container:has([popover]:popover-open) {
  border-color: #006699;
}

Styles a container while it contains a showing popover.

Popover Backdrop

[popover]::backdrop {
  background-color: rgb(0 0 0 / 20%);
}

Adds a translucent backdrop behind the popover while it is in the top layer.

Limitations

The :popover-open pseudo-class depends on the HTML Popover API and does not apply to every visible popup-style element.

Requires a Popover Element

An ordinary visible <div> does not match :popover-open unless it is a showing popover.

Not a General Visibility Selector

The pseudo-class does not match an element simply because its display property is not none.

Not a Modal Selector

Popovers do not automatically make the rest of the page inert or provide the focus behavior of modal dialogs.

Does Not Open Popovers

The selector only styles the showing state. It cannot open or close a popover by itself.

Browser Compatibility

Older browsers may not support the Popover API or the :popover-open pseudo-class.

Popover Types

The hint popover type is newer than the original auto and manual values, so its availability may differ across browsers.

Top Layer Behavior

Showing popovers participate in the browser's top layer. Ordinary stacking-context rules do not fully control their placement relative to other top-layer elements.

Best Practices

• Use :popover-open to style elements that are currently showing as HTML popovers.
• Use the popover attribute to enable native popover behavior.
• Use popovertarget and popovertargetaction for basic controls without JavaScript.
• Choose auto, manual, or hint according to the intended dismissal behavior and browser support.
• Use :has() when a container must respond to the state of a descendant popover.
• Use ::backdrop when a backdrop is appropriate for the interface.
• Do not use popovers as a substitute for modal dialogs when modal behavior is required.
• Provide clear and accessible controls for opening and closing popovers.
• Respect reduced-motion preferences when adding popover animations.
• Test keyboard interaction, Escape dismissal, and light-dismiss behavior in supported browsers.

:popover-open Example

This example uses a button to open an HTML popover. While the popover is showing, the :popover-open pseudo-class applies a blue border, light background, and shadow. Click Close or press Escape to dismiss it.

HTML

<div class="popover-demo">
  <button type="button" popovertarget="demo-popover">Show Popover</button>
  <div id="demo-popover" popover>
    <p>This popover is styled with :popover-open.</p>
    <button type="button" popovertarget="demo-popover" popovertargetaction="hide">Close</button>
  </div>
</div>

CSS

.popover-demo button {
  padding: 8px 12px;
  cursor: pointer;
}
.popover-demo [popover] {
  width: 240px;
  max-width: calc(100% - 30px);
  box-sizing: border-box;
  padding: 15px;
  border: 2px solid #ccc;
  border-radius: 6px;
}
.popover-demo [popover]:popover-open {
  border-color: #006699;
  background-color: #eaf6fc;
  box-shadow: 0 6px 20px rgb(0 0 0 / 20%);
}
.popover-demo [popover] p {
  margin: 0 0 12px;
}

Browser Result

Play in Editor

Note: The popover is hidden initially. Click Show Popover to display it with the open-state styling. Click Close, press Escape, or click outside the popover to dismiss it.

Browser Support

Baseline: Newly available. The :popover-open pseudo-class and the HTML Popover API are supported in current major browsers. Older browser versions may not recognize them, and newer popover features can have different compatibility levels.

For current compatibility information, visit Can I Use? and search for :popover-open or Popover API.

Compatibility Alternative

For browsers without native popover support, JavaScript can control an ordinary element's visibility and apply a class such as .is-open for styling.

Specifications

The :popover-open pseudo-class is defined in the HTML Living Standard as part of the Popover API. It matches elements whose popover state is currently showing.

HTML Living Standard - :popover-open