CSS初心者です。セレクタの結合子についてわからないことがあります。
CSS初心者です。セレクタの結合子についてわからないことがあります。 <body> <div class="wrap"> <a class="item" href="#"> <div class="img"> <div class="icon"></div> </div> <p class="text">テキスト</p> </a> </div> </body> このHTMLに対し、a要素にホバーしている際、iconクラスとtextクラスにスタイルを適用しようと思い以下のように記述すると上手くいきました。 .wrap a :hover ~ .text, .wrap a :hover .icon { background-color: #FF4F02; } １）.wrap a :hover .text,ではスタイルが適用されない理由はなぜか ２）.wrapと.text(.icon)は親と子の関係に思えるが隣接セレクタ、関節セレクタでなぜ適用されるのか 以下コード全文です。その他お気づきの点もございましたらご指摘いただきたく思います。よろしくお願いいたします。 <!DOCTYPE html> <html lang=ja> <head> <meta charset="UTF-8"> <style> body { margin: 0; } .wrap { width: 100%; background-color: #bbb; font-size: 0; } .item { display: inline-block; width: 50%; border: 1px solid #aaa; } .img { position:relative; width:100%; background-color: #eee; } .img:before { content:""; display:block; padding-top:100%; } .icon { position:absolute; bottom:0; left:50%; transform: translateX(-50%); width:70%; height:35%; border-radius:50% 50% 0 0/100% 100% 0 0; background-color: #FFF; } .text { text-align:center; font-size:1vw; background-color: #FFF; margin:0; } .wrap a :hover > .text, .wrap a :hover .icon { background-color: #FF4F02; } </style> </head> <body> <div class="wrap"> <a class="item" href="#"> <div class="img"> <div class="icon"></div> </div> <p class="text">テキスト</p> </a> </div> </body> </html>
HTML、CSS・45閲覧・50
ベストアンサー
質問１、２をまとめて回答。 ■■■ 上手くいっていない ■■■ ──────────────── 以下のように記述すると上手くいきました。 .wrap a :hover ~ .text, .wrap a :hover .icon { background-color: #FF4F02; } ──────────────── いや、うまくいっていない。 試してみれば分かることだけど、 そのコードだと、 <a> にホバーしていても、 その子要素 <div class="img"> にホバーしていないと、 同じ子要素 <p class="text"> にホバーしているときは適用されない。 ■■■ 原因 ■■■ 【 1 】.wrap a :hover ~ .text まず、 ──────────────── .wrap a :hover ~ .text ──────────────── というセレクタは、 ──────────────── .wrap 内の、 ホバーされた <a> 要素より後にある .text ──────────────── という指定ではなく、 a と :hover の間に半角スペースが挟まっているから、 ──────────────── .wrap 内の、 <a> 要素内で、 ホバーされた要素より後にある .text ──────────────── という指定になっている。 だから、 <a> 要素にホバーしたときではなく、 <a> 要素内の <div class="img"> にホバーしたときに適用されるんで、 <p class=".text"> にマウスカーソルが乗っているときは適用されない。 【 2 】.wrap a :hover .icon 同様に、 ──────────────── .wrap a :hover .icon ──────────────── というセレクタは、 ──────────────── .wrap 内の、 <a> 要素内で、 ホバーされた要素内にある .icon ──────────────── という指定になっているから、 <a> ではなく、 <a> 内にある <div class="img"> にホバーした際に、 その中にある <div class="icon"> に適用される。 ■■■ 正しい表記 ■■■ a と :hover の間に半角スペースが入ることで 「ホバーされた<a>」となるはずの指定が、 「<a> 内のホバーされた要素」になってしまっているんで、 a と :hover の間の半角スペースをなくすると、 ちゃんと機能する。 ──────────────── .wrap a:hover > .text, .wrap a:hover .icon { background-color: #FF4F02; } ────────────────
質問者からのお礼コメント
スペースの扱いを根本的に間違えていたようですね。おかげで先に進めそうです。ご回答誠にありがとうございました！
お礼日時：1/23 12:48
