ホーム(記事一覧)へ

CSSセレクタ「+」プラスの使い方【使用例アリ】

CSSセレクタには「+」プラスがあります。

「+プラスってなんだ?どんなときに使うんだ?」

CSSセレクタ「+」プラスの使い方を使用例とともに解説します。

CSSセレクタ「+」プラスの使い方

E+F

Eのすぐ下の弟要素Fに適用されます。それより下のFには適用されません。

親子要素ではなく兄弟要素に対する指定という特徴があります。

<style>
    .E+li{color: red;}
</style>

<ul>
    <li>テキスト</li>
    <li class="E">Eテキスト</li>
    <li>Fテキスト</li>
    <li>テキスト</li>
</ul>
  • テキスト
  • Eテキスト
  • Fテキスト
  • テキスト

ちなみに「+」の前後に空白をいれても問題ありません。

E+F
E + F

【使用例1】連続するpタグのスペース調整

pタグは兄弟要素で多く利用されます。その途中にdivやh2タグがはさまれる場合があります。

そんなとき、divやh2タグのすぐあと1番目のpだけに指定したいCSSがあるとしましょう。

「:first-of-type」では子要素に対して一回しか効かないためふさわしくありません。

「divやh2タグのすぐあと1番目のp」は「p」で指定し、それ以外のpタグに「p+p」で指定する方法があります。

p+pの指定あり

p{margin: 2em 0 1em}
p+p{margin: 1em 0 }

pテキスト

pテキスト

pテキスト

divテキスト

pテキスト

pテキスト

pテキスト

p+pの指定なし

p{margin: 2em 0 1em}
 

pテキスト

pテキスト

pテキスト

divテキスト

pテキスト

pテキスト

pテキスト

【使用例2】選択されたラジオボタンのデザイン

CSSにはinputが選択されたときを指定する「:checked」という疑似クラスがあります。

これを利用して選択されたラジオボタンのテキストデザインを変更することができます。


<style>
input:checked + label{color: red;}
</style>
<input type="radio" name="checked" checked id="radio1"><label for="radio1">りんご</label><br>
<input type="radio" name="checked" id="radio2"><label for="radio2">ばなな</label>

inputとlabelは兄弟要素になりますし、inputの中に子要素は置けないため、「+」でしか実現できない方法です。

【まとめ】CSSセレクタ「+」プラスの使い方

E+F

Eのすぐ下の弟要素Fに適用されます。それより下のFには適用されません。

以上、CSSセレクタ「+」プラスの使い方でした。

関連記事