:open CSS Pseudo Class

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The :open pseudo-class targets elements that are currently in an open state, meaning the element has been expanded or revealed by the user or through script. It is most commonly used with interactive HTML elements that have a built-in open/closed state, such as the <details> element.

When an element supports an “open” state, the browser automatically toggles an internal attribute (usually open) when the user interacts with it. The :open pseudo-class allows you to style that state without relying on JavaScript or attribute selectors.

Common use case: `<details>`

The most common and practical use of :open is with the details element.

<details>
  <summary>More information</summary>
  <p>This content is revealed when opened.</p>
</details>

details:open {
  border: 2px solid #4a90e2;
  padding: 10px;
}

When the user clicks the summary, the <details> element enters the open state and the styles defined with :open are applied.

How it works

The :open pseudo-class matches elements that:

Have an internal “open” state
Are currently expanded or visible
Support the open attribute internally

This means it behaves similarly to a state selector like :focus, but it is state-driven by structure, not user focus.

Styling child elements when open

You can combine :open with descendant selectors to style inner content:

details:open summary {
  font-weight: bold;
}

This will visually emphasize the summary only when the details element is open.

Combining with transitions

Although :open itself does not animate, you can combine it with CSS transitions for smoother UI effects:

details p {
  opacity: 0;
  transition: opacity 0.3s ease;
}

details:open p {
  opacity: 1;
}

This creates a fade-in effect when the content becomes visible.

You may also find these useful when working with interactive UI states:

:hover – styles elements when hovered
:active – styles elements during activation

Syntax

:open {
  /* ... */
}

Example

HTML

<details class="styled-disclosure">

  <summary>Click to reveal more information</summary>

  <div class="content">

    <p>This content is now visible! The border and background colors changed because the element is in the :open state.</p>

  </div>

</details>

CSS

/* Base styles for the details element */

.styled-disclosure {

  border: 2px solid #ccc;

  border-radius: 8px;

  padding: 10px;

  transition: all 0.3s ease;

  font-family: sans-serif;

  max-width: 400px;

}



/* Styling specifically when the element is OPEN */

.styled-disclosure:open {

  border-color: #3498db;

  background-color: #f0f8ff;

  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);

}



/* Change the summary appearance when open */

.styled-disclosure:open summary {

  color: #3498db;

  font-weight: bold;

  margin-bottom: 10px;

}



/* Basic summary styling */

summary {

  cursor: pointer;

  outline: none;

}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS :open pseudo class. Hover over a browser icon to see the version that first introduced support for this CSS psuedo class.