しゅう【Webサイト制作/コーダー】のPortfolio Site 連絡先削除版

子要素にホバーしたら、親要素のスタイルを変えるCSSセレクター「.親要素クラス名:has(.子要素クラス名:hover)」

当サイトはアフィリエイト広告を利用しています

これはシンプルなので、Xの自分の投稿と、引用投稿張っておきます↓↓

Xの引用投稿のコードも引用させていただきます

/* 子要素がホバーされたら、親の背景を変える */
.card:has(.card-content:hover) {
  background-color: #f5f5f5;
}

これは使える…
有益情報ありがとうございます〜 https://t.co/oqiEt3ZJNX
— しゅう【Webサイト制作/改良・コーダー】_筋トレとプログラミング学習で一生成長期のおやじ (@shu_web_net) April 23, 2025

↓↓引用元のX投稿

/* 子要素がホバーされたら、親の背景を変える */
.card:has(.card-content:hover) {
background-color: #f5f5f5;
}

特定の子要素の時、親要素のスタイルを変えられる、hasの使い方を学んだ！
chatGPTは最新の技術も教えてくれるから取り入れていきたいですね。
— TKG【WEB制作】 (@TKG1494863) April 23, 2025