:open疑似クラスで開いている要素をまとめてスタイリングする

:openはdialog、details、select、ピッカー付きのinputといった開閉できる要素が開いている間にマッチするCSS疑似クラスです。Baseline 2026で揃ったので、dialog[open]やdetails[open]といった要素別の属性セレクタを横断して一本化できます。

公開: 2026年5月23日(土)

更新: 2026年5月23日(土)

0 views

はじめに

HTMLには開閉できる要素が複数あります。<dialog>、<details>、<select>、ピッカーUIを持つ<input>などです。これまでは開いているときに当てるCSSはそれぞれ別のセレクタが必要でした。

<dialog> → dialog[open]
<details> → details[open]
<select> → 専用セレクタなし
<input type="color">などのピッカー → 専用セレクタなし

Baseline 2026で揃った:open疑似クラスは、これらをまとめて表せるセレクタです。なお、popover属性を持つ要素は別系統で:popover-openが用意されており、:openの対象には含まれません。

マッチする要素

:openは現在開いている状態の要素にマッチします。仕様上、対象になるのは以下です。

<dialog> - open属性が付いているとき
<details> - open属性が付いているとき
<select> - ピッカー（ドロップダウン）が開いているとき
<input>のうちピッカーUIを持つ型（color、date、fileなど） - ピッカーが開いているとき

popover属性を持つ要素は:openではなく:popover-openで扱います。

使い方

開いた瞬間だけ枠線を強調したい、開いているトリガーボタンとそろえて色を変えたい、といったケースで一本のセレクタで書けます。

:open {
  outline: 2px solid var(--color-accent);
  outline-offset: 4px;
}

要素を絞りたいときは普通のセレクタと組み合わせます。

/* dialogとdetailsが開いているとき */
dialog:open,
details:open {
  border-color: var(--color-accent);
}

/* selectのピッカーが開いているとき */
select:open {
  box-shadow: 0 10px 30px rgb(0 0 0 / 0.2);
}

:openで開いている要素を一括スタイリング

対象要素には共通のスタイルだけ当てています。開いている要素にだけ:openが当たって枠線が出ます。selectやinputはピッカーが要素を覆ってしまうので、親セクションに:has(:open)で背景色も付けて開いている状態が見えるようにしています。

details

クリックして開く

開いている間、details:openが当たります。

dialog

開いている間、dialog:openが当たります

select

ピッカーを開いている間だけselect:openが当たります。

input (color)

カラーピッカーを開いている間だけinput[type="color"]:openが当たります。

おわりに

:openの本当の価値は<select>やピッカー付き<input>（color、date、fileなど）にスタイリングできることにあります。<dialog>や<details>は元から属性セレクタで取れていたので:openはそれを横断的にまとめる書き方でしかないですが、これらネイティブピッカーの開閉に追従するCSSはこれまで書きようがなく、:openが唯一無二の手段として加わった形です。Baseline 2026で主要ブラウザに揃ったことで、ネイティブUIに踏み込んだスタイリングが現実的に書けるようになりました。

k8o

Blog