CSS Utility

:open 가상클래스

details / dialog / select의 "열린 상태"를 JS 없이 CSS 한 줄로 칠합니다. 아래 색·회전·백드롭은 전부 :open이 그려요.

details

:open 은 어디에 쓰나요?
열고 닫히는 네이티브 요소 - details, dialog, select, 그리고 날짜·색상·파일 피커가 열린 상태일 때를 가리킵니다.
[open] 속성과 뭐가 다른가요?
details는 [open] 속성이 있어 예전에도 잡혔지만, dialog·select·피커는 잡을 방법이 없었어요. :open 은 이 모두를 하나의 셀렉터로 통일합니다.
지금 바로 써도 되나요?
Chrome 148 / Firefox 151 / Safari 26.5에서 Baseline에 합류했습니다. 구형은 details의 [open] 폴백으로 안전하게 대비할 수 있어요.

dialog

열렸습니다

이 카드의 등장 애니메이션과 뒤 배경(백드롭)의 어두워짐은dialog:open과dialog:open::backdrop이 칠한 거예요.

select

드롭다운이 떠 있는 "그 순간"에만 select:open이 적용돼요. 이전엔 CSS로 잡을 수 없던 상태였습니다.