CSS :has() で「親を選ぶ」スタイリング

CSS の :has() は「子や兄弟の状態に応じて自分にスタイルを当てる」ことを可能にした。これまで JavaScript で親要素にクラスを付けていた処理の多くが、CSS だけで書けるようになる。

画像の有無でカードの余白を変える

たとえば「画像を含むカードだけ余白を変える」といった分岐を、要素の構造を見て書ける。

.card:has(img) {
  padding-top: 0;
}
.card:not(:has(img)) {
  padding-top: 16px;
}

フォームのバリデーション表示

:has(:invalid) を使えば、無効な入力を含むフォーム全体の見た目を切り替えられる。状態管理のコードを増やさずに、UI のフィードバックを表現できるのが嬉しい。