`:playing` や `:muted` で video 要素の状態に応じたスタイルを適用する
video 要素の再生やミュート状態に応じて見た目を変えるには、JavaScript でイベントを監視して CSS クラスを同期する方法が使われてきました。メディア状態擬似クラスを使うと、ブラウザが管理する再生、一時停止、シーク、バッファリング、ミュートなどの状態を CSS から直接選択できます。この記事では 7 つの擬似クラスの条件と、:has() を組み合わせて動画プレイヤーの表示を切り替える方法を紹介します。











