セレクタ>セレクタ、セレクタ+セレクタをどういうときに使いますか？

Question

https://dotinstall.com/lessons/basic_css_v3/31704
この動画を見ているのですがセレクタ>セレクタ、セレクタ+セレクタをどういうときに使うか考えているのですがイメージがわきません。どういう時に使いますでしょうか？

Answer 1

隣接セレクタは便利だと思いますけどね
たとえばこんな感じ

input[type=checkbox]:checked + span{color:red};

<ul>
<li><label><input type="checkbox"><span>hoge</span></label></li>
<li><label><input type="checkbox"><span>hoge</span></label></li>
<li><label><input type="checkbox"><span>hoge</span></label></li>
<li><label><input type="checkbox"><span>hoge</span></label></li>
</ul>

多用は禁物でしょうけど

input:invalid + span{displa:inline;}
input:valid + span{display:none;}

<input type="text" required> <span>(入力必須)</span>

Comments

[退会済みユーザー]

ありがとうございます！

Answer 2

CSSでもそれなりに使える場面はあります。

セレクタ>セレクタ

<ul class="list">
  <li>
    <a href="piyo.html">スタイルをつけたいでござる</a>
  </li>
  <li>
    <ul>
     <li>
　　　　<a href="fuga.html">スタイルをつけたくないでござる</a>
　　　</li>
    </ul>
  </li>
  <li>
    <a href="hoge.html">スタイルをつけたいでござる</a>
  </li>
</ul>

.list>li>a{
  /* 一層目だけスタイルを付けたいとき */
  color:red;
}

セレクタ+セレクタ

 
  <label for='hoge' class="piyo">hoge</label><input id=’hoge’>

  .piyo:hover+input{
　　　/* 選択されているよってアピールしたいとき */
　　　border:1px solid blue;
  }

こんな風にCSSでも役立ちますが、本領を発揮するのはjQueryでのセレクタの所です。
htmlを直すことが色んな理由（作業工程、作業時間、権限、共有箇所、ルール）とかで難しいときに、そこをどうにかしたいってことを余裕でできるようになります。
jQuery("#hoge+.row").～ みたいな感じで

また、htmlスクレイピングでCSSセレクタでの指定とかでも大活躍です。

Comments

[退会済みユーザー]

ありがとうございます。利用シーンを用いて説明頂きわかりやすかったです。

Answer 3

私はサーバエンジニアなのであまりcssをいじることはないのですが、cssコーダーさんが作ったソースを毎日のように確認しています。
現場ではセレクタ>セレクタはまたに見かけます。
ですが、セレクタ+セレクタは1度も見たことがありません。
セレクタの次のセレクタなんてパッとhtml見ただけでは理解にしくいからでしょう。
分かりにくいcssを書くのなら、セレクタに細かくクラスを付けた方がいいですね。
ということで、階層化されたセレクタに対してスタイルを設定することはあまりないです。

Comments

[退会済みユーザー]

サーバエンジニア視点でのご意見ありがとうございます！

Answer 4

使いません。使ってしまうとHTMLの構造が変わった時に直す箇所が増えるので。

Comments

[退会済みユーザー]

ありがとうございます！