子のチェックで親の見た目を変えたい：CSSの:hasで条件を選ぼう

カード内のチェックを入れたとき、そのカード全体を目立たせたい。CSSの:has()を使うと、内側などの条件に合う要素を持つかどうかで、対象の要素を選べるよ。

今回はチェックボックスを一つ含む架空のカードで、選ばれる場所を確認する。保存や送信は行わず、ブラウザだけで試せる作例だよ。

色を変える対象は、:hasの左側

.card:has(input:checked) {
  border-color: #5445df;
  background: #eeebff;
}

この例で選ぶのはinputではなく.card。内側にチェック済みのinputがあるという条件を、カードへ付けている。

チェック欄自体の見た目を変えるinput:checkedとは、選ぶ対象が違うよ。作例ではカードの枠と背景が変わり、チェック欄の横にも状態を文字で表示する。

直接の子だけに絞りたいとき

.card:has(> input:checked) {
  border-color: #5445df;
}

は直接の子を指定するための結合子。inputがラベルなどの内側へ入っている構造なら、この条件は合わなくなる。

今回の作例はlabelの内側にinputを置くので、最初のinput:checkedという条件を使う。「親を選ぶ機能」とだけ覚えるより、どの関係を条件にしたか、HTMLの構造と合わせて見よう。

作例では状態と強調を分けて試す

1. チェックを入れ、カードの背景と「選択中」の文字を確認する。
2. チェックを外し、元へ戻ることを見る。
3. 「条件の強調を使う」をオフにし、チェックは使えるまま見た目の強調だけがなくなることを確かめる。
4. 「最初から試す」で未選択・強調オンへ戻す。

強調スイッチは比較用に付けたもの。:has自体が、画面に状態を保存したり、フォームの値を送ったりするわけではないよ。

未対応でも基本の操作を残す

作例には、利用中のブラウザが:hasの構文へ対応するかを表示する。未対応なら、チェックボックスと文字の状態は使え、CSSの強調を加えない。

対応判定は、構文を受け付けるかを見るもの。複雑なページ全体の描画速度や、あらゆる組合せの動作まで保証する確認ではないよ。

詳細度と対象の広さにも気を付けよう

:hasの詳細度は、引数となるセレクターの影響を受ける。条件の中へIDを混ぜた場合などは、単純なクラスの指定より上書きしにくくなることがある。

また、ページ全体へ必要以上に広い条件を付けず、変更したいカードなどへ範囲を絞ると、意図を追いやすい。今回の一つのカードの結果から、大規模なページでの性能まで判断しないようにしよう。

編集部ではChromiumで、チェックの切替、強調オン・オフ、対応判定とリセットを確認した。入力中のまとまりはfocus-within、詳細度は:isと:whereも参考になるよ。