質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.10%

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

解決済

回答 5

投稿

  • 評価
  • クリップ 0
  • VIEW 193

Kamage_Udon

score 1

質問内容

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;
}


よろしくお願いします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • miyabi_takatsuk

    2019/10/10 10:30

    "クリックしたとき"

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

    キャンセル

  • Kamage_Udon

    2019/10/10 19:09

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

    キャンセル

回答 5

checkベストアンサー

+6

残念ながら、現在では、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を使わずにクリックアクションを起こしたい時にしばしば使われるテクニックです。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/10/10 19:25

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

    キャンセル

  • 2019/10/10 19:35

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

    キャンセル

  • 2019/10/10 23:06

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

    キャンセル

+2

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';
  }
}

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/10/10 00:37

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

    キャンセル

  • 2019/10/10 19:16

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

    キャンセル

+2

私は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;
}

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/10/10 13:19

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

    キャンセル

  • 2019/10/10 13:32

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

    キャンセル

  • 2019/10/10 19:26

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

    キャンセル

+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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/10/10 19:27

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

    キャンセル

-2

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/10/10 19:30

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

    キャンセル

  • 2019/10/10 20:13

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

    キャンセル

  • 2019/10/10 23:13

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

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.10%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る