:open擬似クラスで開いている要素を選ぶ

いままで要素が開いている状態かどうかは、details[open]やdialog[open]のように属性セレクターを使って判定してきた。そのため、select要素やinput[type="color"]（カラーピッカー）のような入力フォームでは開いた状態をCSSから選択する方法がなく、JavaScriptでクラスを付け替える実装に頼るしかなかった。

そこで登場したのが:open擬似クラス。 :open擬似クラスは開閉状態を持つ要素のうち、現在開いているものを選択するための新しいCSS擬似クラスだ。

:open擬似クラスとは

:openはopen状態にマッチする疑似クラスで、開閉状態を意味的な状態として扱われる。そのため、visibility: hiddenなどで見えない状態にしていても、展開されていれば:openにマッチする。 見た目ではなく「UIとして開いているか？」を基準に判定していることがポイントだ。

dialog,
select,
input[type="color"] {
  /* 閉じている状態 */
}

dialog:open,
select:open,
input[type="color"]:open {
  /* 開いている状態 */
}

:openと:has()を組み合わせる

:openは:has()と組み合わせることで、開いている要素そのものではなく、開いている要素を持つ親要素を選択できる。

<div class="field">
  <label>オプション</label>
  <select>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
  </select>
</div>

.field:has(select:open) {
  border: 4px solid blue;
}

開閉アニメーションをつける

:openで開いたときに要素に対してアニメーションをつけることもできる。

<label for="font-color">文字色</label>
<input id="font-color" type="color" />

@keyframes wiggle {
  0%   { transform: translateX(0); }
  30%  { transform: translateX(3px); }
  60%  { transform: translateX(-3px); }
  100% { transform: translateX(0); }
}

input[type="color"]:open {
  animation: wiggle 200ms ease-out;
}

デモ