: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.
Syntax
/* Usage 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.
114+
125+
17+
114+
Your first month is free
Managed WordPress hosting for faster sites.
Learn more