Get affordable and hassle-free WordPress hosting plans with Cloudways — start your free trial today.
Experimental: Check browser support before using this in production.
The CSS :open
pseudo-selector targets elements that support open and closed states — such as the <details>
and <select>
elements — and selects them only in their open state.
For example, can select the “open” state of a <details>
element and apply a border to it:
details:open {
border: 1px solid green;
height: 6rem;
}
The :open
pseudo-selector is defined in the CSS Selectors Level 4 Module specification.
Syntax
element-selector:open {
/* ... */
}
The elements that support open and closed states include:
<details>
<select>
<dialog>
<input>
elements where the user has to choose a value, e.g.,<input type="date">
or<input type="color">
Basic usage
You can style this pseudo-selector with any combinator, accepted HTML tags, and even as a standalone attribute with the attribute selector.
/* Applies to all "open" elements */
:open {
color: white;
background: black;
}
/* Applies to "open" <details> elements */
details:open {
color: black;
background: white;
}
/* Applies to elements with the "open" HTML attribute */
[open] {
color: green;
background: yellow;
}
:popover-open
This is different from Although they both target “open” elements, the exact elements they target are pretty different.
For instance, :popover-open
only applies to HTML elements with the popover
attribute while :open
applies to elements with an open and closed state (<details>
, <dialog>
, etc.) Here’s a brief summary of their differences:
:open | :popover-open |
---|---|
Applies to certain elements like <details> , <select> element with a dropdown display, some <input> elements like <input type="color"> that have a display | Only applies to popover elements that are shown or “popped out” on the screen |
Uses the open attribute and this displays the hidden part of the HTML element | Uses the popover attribute in conjunction with popovertarget |
Not associated with any API, just native to HTML as an attribute and can be accessed with the pseudo-selector :open | Associated with the Popover API |
Open and closed are semantic states
Remember how I mentioned that the “open” state means the element is shown?
Well, for those elements selectable via :open
, it is possible to select them even when they aren’t exactly shown. If, for example, we hide an element using CSS properties like display: none
or visibility: collapse
, then it can still be selectable using :open
as long as it has the open
state in its HTML.
Take the following <details>
element with a display: none
as an example:
<details open style="display: none;">
<summary>Hidden details</summary>
<p>You can't see me, but I'm still in my "open" state regardless and the styles will still be applied.</p>
</details>
As you can see, it has an open
HTML attribute, so we can still select it using :open
:
details:open {
border: 2px solid red;
}
The CSS styles will still apply to the element even though it is not visible on the screen, or it has been forced to not be visible.
:closed?
What about Did you know you can style the element in its closed state using the :not()
selector?
:not(:open) {
/* css styles */
}
There was supposed to be a :closed
pseudo-class to select elements is in their closed state, but it still being debated. In fact, it has possibly been rejected as per this GitHub issue since it would be redundant when something like :not(:open)
exists. I say possibly because while the commit and issues are there, it has not yet been reflected in the specification.
Demo
Here’s a demo showing the elements that have both open and closed states with the :open
pseudo-selector styles applied to them:
Specification
The :open
pseudo-selector is defined in the CSS Selectors Level 4 Module specification, which means that this document is subject to still change in the future.