:has() は「〜を含んでいる場合」という条件を指定できる。
セレクタの中に子要素や特定のパターンを入れて、「その要素を持っている親をスタイルする」ことができるマウスオン時のスタイル指定をする:hoverみたいな疑似要素です。
以前まではJavaScriptを使用してclass付与して、そのclassにCSSを設定しておいて…みたいなやや面倒なことをしなくてはならなかったものがこの疑似要素の登場でくっそ楽になったんです。
それでは基本的な書き方はこちら
childというclassを子要素として持っている、parentというclassを持ったdiv要素の背景色をlightyellowにする。というCSSになります。
[codepen_embed height=”300″ default_tab=”html,result” slug_hash=”ByjKByp” pen_title=”Untitled” user=”dipcode_kj”]See the Pen
Untitled by dipcode_kj (@dipcode_kj)
on CodePen.[/codepen_embed]
どうですか？簡単でしょう？
CSSだからJavaScriptで動的にclassを付与した場合でも反映してくれます。
使用ケース
- 1. form内の要素でバリデーションエラーのとき動的にclass付与した場合
- 2. 動的にclass付きのHTML要素を追加した場合
- 3. チェックボックスに応じて親要素を変える
3番のcheckedをやってみます。こんな感じになりますのでご参考まで
[codepen_embed height=”300″ default_tab=”html,result” slug_hash=”QwyNWre” pen_title=”[:has]チェックボックスの状態でスタイルを分ける” user=”dipcode_kj”]See the Pen
[:has]チェックボックスの状態でスタイルを分ける by dipcode_kj (@dipcode_kj)
on CodePen.[/codepen_embed]
まだまだあると思いますが、サクッと思いつくのはこんな感じですかね。
それでは良いコーディングライフを！
