:open

Allows a pop-up to be styled, but only when it is being shown.

Published on Updated on

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

Syntax

:open

Example

The following example transitions the pop-up 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

See also

Updated on Improve article

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.