年々進化するCSS。
昔はJavaScriptを使わなければ実現できなかったことも、
今ではCSSだけでもできるようになってきました！
なかでも、私がよく活用しているひとつが :has() 疑似クラスです。
2023年12月に主要なブラウザでサポートされ、実践投入できるようになってきました。
:has() とは？
:has()を使えば、引数（カッコ内）に渡したセレクタを内部に持っている要素に対して、スタイルを適用できます。
例えば、a:has(img) と記述すれば、「内部に img タグを含んでいる a タグ」だけをターゲットにできます。
JavaScriptいらずの表現
冒頭にふれた「JavaScriptの代用」として、:has() は非常に強力です。
その一つをご紹介します。
html
<div class="has-test"> <a id="test01" class="child01" href="#test01">blue</a> <a id="test02" class="child02" href="#test02">orange</a> <a id="test03" class="child03" href="#test03">green</a> </div> <div class="has-test"> </div>css
.has-test { display: flex; gap: 10px; margin: 0 auto; padding: 50px 20px; box-sizing: border-box; width: 100%; background: #eee; align-items: center; justify-content: center; flex-direction: column; transition: 0.3s ease; } .has-test a { display: block; width: 100%; max-width: 200px; padding: 10px; box-sizing: border-box; color: #fff; text-align: center; text-decoration: none; text-transform: uppercase; border: 1px solid #fff; } .child01 { background: #0089ff; } .child02 { background: #F75820; } .child03 { background: #00ae60; } .has-test:has(.child01:hover) { background: #0089ff; } .has-test:has(.child02:hover) { background: #F75820; } .has-test:has(.child03:hover) { background: #00ae60; }こういった「特定の要素にホバーしている間だけ、親要素の背景画像を切り替える」
といった挙動もCSSだけで実装可能です。
また、書き方によっては離れた別の場所を変化させることも出来ます！
工夫次第で、JavaScriptの代用に使える:has() 。
より詳しく知りたい方は、以下のMDNの公式ドキュメントもぜひチェックしてみてください。
