:popover-open
Matches elements with the popover attribute that are currently in their open state. It allows you to style top-layer content like menus and tooltips specifically when they are visible.
Quick example
[popover]:popover-open {
/* Styles the popover only when it's active and visible */
border: 2px solid var(--accent);
opacity: 1;
transform: translateY(0);
transition: all 0.3s allow-discrete;
}:popover-open Browser Support
Newly available Since 2025 87% global usage
Since 2025 this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
Works in all modern browsers. May need a fallback for older browsers.
114+
125+
17+
114+