質問: ### 質問内容 HTML、CSSを勉強しています。 CSSのセレクタに関して質問なのですが、下記のように間に一つ上の要素を挟む場合の セレクタの書き方を教えていただけます。 ``` ←これをクリックしたとき ←こちらの色を変更したい ``` ### 試したこと ダメ元で下記のCSSを書いて+>~などを試しました。 (調べた限りダメだと思っていますが、一応試しました) ``` .lower-a:active .lower-b{ background-color: green; } ``` よろしくお願いします。
回答: 残念ながら、現在では、CSSで親要素に遡ることはできないので、CSS単発ではできないです・・・。 (CSS4の:hasセレクタをうまく使えばできるが、まだどのブラウザもサポートしていない) ですが、HTMLを少し変えれば、CSSだけでも、親跨ぎの要素を指定することができます。 JavaScriptも使いません。 そんな、JavaScriptを使わない方法が、下記になります。 ``` ←これをクリックしたとき ←こちらの色を変更したい ``` ``` .lower-a { display: block;} #clickChk { display: none;} #clickChk:checked + .lower-b { background-color: green; } ``` この、input、labelを使ったテクニックは、 JavaScriptを使わずにクリックアクションを起こしたい時にしばしば使われるテクニックです。