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タグ

子要素の中のPタグ

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

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

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

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

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

#demo + p span{
 font-weight:bold;
 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を使えるのでそんな悪いものではないですが、あまり複雑にし過ぎるとメンテナンス性は悪くなります。

23:40まで受講できるから、仕事と両立できるHTML5/CSS3コース[オンライン]

2020年2月5日HTML/CSScss,セレクタ

Posted by ミフネWEB