cssセレクタ「+」「>」「~」の意味と使い分け

次第に見かけなくなりましたが、「+」や「~」などをCSSセレクタを見かけることがあると思います。

たとえば　#hoge + div　や、#hoge > div　のようなものです。

これら、「セレクタ + セレクタ」「セレクタ ~ セレクタ」「セレクタ > セレクタ」は、cssの適用させる範囲を絞り込むセレクタの使い方です。

順に見ていきます。

直下の子要素にだけ適応させる「>」

<div id="hoge">
  <p>直下のPタグ</p>
  <div>
     <p>子要素の中のPタグ</p>
  </div>
</div>

このような入れ子構造になったコンテンツがあったとして、ここに

#hoge p {
 color:tomato;
}

とcssをあてると全Pタグの文字色が変わります。しかし、

#hoge > p {
  color:tomato ;
}

と指定してやると、divの子要素にあるpタグだけにcssが適応され、孫要素のpタグには適応されません。
実際に表示させてみるとこうなります。

お隣さんにだけ適応させる「+」

「>」は子要素への限定でしたが、次は同じ階層の隣接した要素に働く「+」です。

個人的には使う頻度高いです。

<p id="demo">毎日</p>
<p><span>眠い</span></p>
<p><span>です</span></p>

このようなコンテンツがあったとして、

#demo + p span{
　color:red;
}

とすると、#demoの隣のpタグにあるspanタグにだけ作用します。

inputのチェックアクションに使った例が以下。

See the Pen CSS radio button by Takashi Abe (@TakeshiAbe) on CodePen.

弟要素全部に作用する「~」

「+」は隣接する要素限定に作用しましたが、「~」は以降の「弟要素」全てに作用します。

<p>いろはにほへと</p>

<p id="hoge">ちりぬるを</p>

<p>わかよたれそ</p>

<div>つねならむ
　<p>うゐのおくやま</p>
</div>

<p>けふこへて</p>

#hoge ~ p{
 color:red;
}

#hogeの次の行以降の弟要素にcssが作用しており、かつ入れ子になった「うゐのおくやま」(子要素)には作用していないのが分かると思います。

セレクタの絞り込みは、idやclass属性を記述しなくても複数の限定された範囲にcssを使えるのでそんな悪いものではないですが、あまり複雑にし過ぎるとメンテナンス性は悪くなります。