一つ上の要素を間に挟むセレクタの書き方

Question

###質問内容
HTML、CSSを勉強しています。

CSSのセレクタに関して質問なのですが、下記のように間に一つ上の要素を挟む場合の
セレクタの書き方を教えていただけます。

<div class="middle-a">
  <div class="lower-a"></div> ←これをクリックしたとき 
</div>
<div class="middle-b">
  <div class="lower-b"></div> ←こちらの色を変更したい
</div>

試したこと

ダメ元で下記のCSSを書いて+＞~などを試しました。
（調べた限りダメだと思っていますが、一応試しました）

.lower-a:active .lower-b{
  background-color: green;
}

よろしくお願いします。

Comments

[miyabi_pudding]

"クリックしたとき"

とありますが、
:activeは、クリックした要素のフォーカスが外れると、元に戻ります。
クリックした後、再クリックしたら元に戻るのか、
フォーカスが外れたら元に戻っていいのか、
の、実現したい仕様をもう少し詳しく質問文に書いていただけませんか？
質問は編集できますので。

[Kamage_Udon]

修正依頼ありがとうございます。拙い分ですが修正いたしました。

Answer 1

残念ながら、現在では、CSSで親要素に遡ることはできないので、CSS単発ではできないです・・・。
（CSS4の:hasセレクタをうまく使えばできるが、まだどのブラウザもサポートしていない）

ですが、HTMLを少し変えれば、CSSだけでも、親跨ぎの要素を指定することができます。
JavaScriptも使いません。
そんな、JavaScriptを使わない方法が、下記になります。

<div class="middle-a">
  <label for="clickChk"><span class="lower-a"></span></label> ←これをクリックしたとき 
</div>
<div class="middle-b">
  <input type="checkbox" value="1" name="clickChk" id="clickChk">
  <div class="lower-b"></div> ←こちらの色を変更したい
</div>

.lower-a { display: block;}

#clickChk  { display: none;}

#clickChk:checked + .lower-b {
  background-color: green;
}

この、input、labelを使ったテクニックは、
JavaScriptを使わずにクリックアクションを起こしたい時にしばしば使われるテクニックです。

Comments

[hatena19]

activeの動作と異なりませんか。

:active - CSS: カスケーディングスタイルシート | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/:active

質問者の意図がこちらの場合もあり得ますが。

[miyabi_pudding]

hatena19さん>
確かに、:activeと動作は異なりますが、
ソースコードの中に、"クリックしたとき"と明記してある以上、
それかそれ同等のアクションの時と判断しました。
:activeはフォーカスが外れると元に戻るため、
それであれば、逆に、質問者さんの意図はあくまで、"クリックしたとき"と判断し、
であれば、再クリックしない限り元に戻らない、:checkedが最適解ではないではないでしょうか？

って、細かい意図、実現したい仕様が質問に書いてないので、なんとも言えませんが。
その意図によっては、:activeと同じ挙動を実現すべきですが、
これ以上は、"クリックしたとき"以外の意図は、質問に明記してもらわないとわかりませんね。

[hatena19]

私も、別の要素の色を変更するという要件から推測するに、こちらの回答の仕様の可能性が高いかと思います。
「クリックしたとき」に背景色を 緑/透明 と交互に変更 と書いてもらえれば明確なんですけどね。

[miyabi_pudding]

hatena19さん>
再評価、ありがとうございます。
質問修正依頼にもコメントさせていただいたので、質問者さんの返答を待ちたいと思います。
それに応じて回答を修正いたします。

[Kamage_Udon]

ご連絡遅れて申し訳ありません。私の質問内容が不明瞭なため混乱させてしまいました。
希望した形で表現をすることができました。ありがとうございます！

[miyabi_pudding]

Kamage_Udonさん>
フォーカスが外れても状態維持で合ってたのですね。
次質問される時は、もっと細かく書かれるといいかと思います〜
HTML、CSS、JSの世界では特に、同じ"クリックしたとき"でもいくつも状態があるのですよ。
クリックした瞬間、クリックし続けている状態、クリックを離した瞬間、クリックを離した後etc...

[Kamage_Udon]

＞＞miyabi_takatsukさん
クリックした瞬間、クリックし続けている状態、クリックを離した瞬間、クリックを離した後・・etc
この辺りはあまり考察しないところでした、まさしく目からうろこです。今後はこのあたりも気を付けて質問したいと思います。
本当にありがとうございました。

Answer 2

active と focus は違いますが、要件を満たすこともあるでしょう。

.middle-a:focus-within ~ .middle-b .lower-b {
  background-color: green;
}

<div class="middle-a">
  <button class="lower-a">button</button>
</div>
<div class="middle-b">
  <div class="lower-b">lower-b</div>
</div>

https://developer.mozilla.org/ja/docs/Web/CSS/:focus-within

Comments

[Kamage_Udon]

ありがとうございます！参考にさせていただきます。

Answer 3

私は2つの方法をお薦めします。HTMLとCSSのみで単純な遠隔処理をすることは可能ですが、複雑になっていくと必ずしも希望通りの結果が得られるとは限りません。

1. 対象物を入れ子にする

ボタンの中に対象物を入れ子にすることで、ボタンをアクティブした時に、対象物のスタイルを変化させることができます。

<div id= "btn-1">ボタン1
  <div id= "obj-1">色を変える</div>
</div>

#btn-1{
  height: 50px;
  width: 110px;
  border: 1px solid black;
  border-radius: 6px;
  color: white;
  line-height: 50px;
  text-align: center;
  font-size: 18px;
}

#obj-1{
  position: absolute;
  height: 80px;
  width: 80px;
  background: blue;
  margin: 40px 10px;
}

#btn-1:active #obj-1{
  background:green;
}

2. checkboxを利用する

この方法は前者より一見複雑に見えますが、自由度が高く、知っておいて損はないでしょう。

<input type= "checkbox" id= "test-checkbox"></input>
<!--ラベルをチェックボックスに貼る-->
<label id= "btn-2" for= "test-checkbox">ボタン2</label>
<!--色を変えたいもの-->
<div id= "obj-2">色を変える</div>

/*チェックボックスはdisplayを消す*/
#test-checkbox{
  display: none;
}
#btn-2{
  border: 1px solid black;
  height: 50px;
  width: 110px;
  font-size: 18px;
  border-radius: 6px;
  line-height: 50px;
  text-align: center;
}
#obj-2{
  position: absolute;
  height: 80px;
  width: 80px;
  background: blue;
  margin: 40px 10px;
}
#test-checkbox:checked ~ #obj-2{
  background: green;
}

Comments

[miyabi_pudding]

クラスないし、IDに、属性の値と同じ文字列を与えるのは、混乱やエラーの元になりますし、あまりよろしくないかと思いますが・・・。
（要素名でないのでまだマシですが）

[masa_mf3]

@miyabi_takatsk ありがとうございます、変更させていただきました。

[Kamage_Udon]

ありがとうございます！参考にさせていただきます。

Answer 4

CSSでできない気がしますがそこまでいくとJavaScriptでやったほうが楽かもしれません。

<div id="middle-a">
  <div id="lower-a">A</div> ←これをクリックしたとき 
</div>
<div id="middle-b">
  <div id="lower-b">b</div> ←こちらの色を変更したい
</div>

document.getElementById("lower-a").onclick = function(){
  document.getElementById("lower-b").style.backgroundColor = 'green';
}

白緑を切り替えたいならこんな感じ（分かり易さ重視で書いてあるのでもっとスマートにできるはずです）

document.getElementById("lower-a").onclick = function(){
  if (document.getElementById("lower-b").style.backgroundColor == 'green') {
    document.getElementById("lower-b").style.backgroundColor = 'white';
  } else {
    document.getElementById("lower-b").style.backgroundColor = 'green';
  }
}

Comments

[kyoya0819]

class指定をするならjQueryを使ったほうが楽です。

[Kamage_Udon]

ありがとうございます。参考にさせていただきます。

Answer 5

こういう場合はVue,React, Jqueryを使った方がいいですよ

Comments

[miyabi_pudding]

こ、こんなちょっとのところで、フレームワーク使うのはさすがに大仰では・・・？
導入やラーニングにかなりリソース割かれてしまうと思いますが・・・。
jQueryは最適だと思うので、低評価はしていません。

[kyoya0819]

miyabi_takatsukさんに同意見です。

jQueryならまだしもVue等のフレームワークを導入する必要性がわかりません（他所で既出ならともかく が 質問には書いていないので分かりませんが）

ちなみに低評価は自分ではありません。

jQueryは読み込んで当たり前な風潮が微妙にありますけど...（それって自分だけか？）

[Kamage_Udon]

確かにフレームワークを使うのも一つの方法だと思います。ただ、今回はCSSやHTMLの基礎をきちんと学ぼうと考えておりますので極力使わずにやりたいと思います。

[miyabi_pudding]

asuchi0819さん>
私は、jQueryはデフォでいいと思いますw
ただ、ほんとにごく最近だと、jQueryじゃなくてネイティブの方がパフォーマンスいい神話もありますし、微妙かもですね。
そして、闇雲に、jQueryよりフレームワーク使ったれ！
って傾向もある気がする・・・。

[kyoya0819]

> miyabi_takatsukさん
そうですね
ただし、何でもかんでもフレームワークを使ってると実力が伸びないという欠点もありますが...

[Kamage_Udon]

最初はJQueryというかJavaScriptも合わせて試そうと思ったのですが、過去の経験からCSSで出来ることできないこともわからないで触り始めると絶対こんがらがると思ってまずはCSS+HTMLから学ぼうと思いましたｗ

フレームワークはvue.jsを少し試して「裏で走っている仕組みの理解が追い付かない」と思って後回しにしました。。。