
次第に見かけなくなりましたが、「+」や「~」などを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タグ
子要素の中の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を使えるのでそんな悪いものではないですが、あまり複雑にし過ぎるとメンテナンス性は悪くなります。