CSS :open: style the native open state without inventing one

When to use it

An audit help panel is a details element. Its summary has a permanent border and focus style; opening the disclosure adds a background cue and a border beneath the summary. The native summary remains the control, so keyboard activation and expanded state come from HTML. The sample includes details[open] as a fallback for engines that do not recognize :open. Test Enter and Space on the summary, a long help paragraph, nested links, and a second disclosure in the same group. A select picker can also match :open, but browser chrome around a native picker is not fully controlled by this selector; do not promise to style the option popup itself. If the panel is a dialog, closing and focus restoration require correct dialog behavior, not merely a color rule. Avoid styling every :open element globally, since a dialog, details, select, and input picker need different treatments. The state cue is secondary to visible content and the native expanded relationship.

.audit-help > summary { border-block-end: 1px solid #78909c; padding: .6rem; }
.audit-help[open] > summary { background: #e9f2f6; }
.audit-help:open > summary { border-block-end-color: #1c5e87; }
.audit-help > summary:focus-visible { outline: 3px solid #1c5e87; outline-offset: 2px; }

Cost and verification

The matching cost is negligible. The compatibility cost matters because :open became broadly available later than the open attribute on details. A usable base rule and the details[open] fallback carry the interaction if the pseudo-class is ignored. Test the actual target browsers before applying :open to picker controls. A CSS state cannot persist a disclosure choice across navigation or decide whether opening one closes another; those are document or application contracts. Never remove the summary marker without providing an equally clear disclosure affordance, and do not hide the focus outline to keep the panel visually quiet.

Common Mistakes

• Do not use :open as a synonym for :popover-open.
• Do not expect :open to create the open state.
• Do not replace the native summary with a noninteractive painted heading.

Connected lessons

• CSS Property Decisions
• CSS :popover-open: style only the visible popover state
• CSS focus-visible: keep keyboard location unmistakable
• CSS form states: make errors and disabled fields explicit
• HTML details and dialog: distinguish disclosure from a modal task

Related native states

• CSS ::details-content: style the disclosure body while keeping native behavior