ホームへ

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

2021年10月01日

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

CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。

↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓

↑「副業してもう少し稼ぎたい!」というかたのために副業の方法も解説しています。

【使用例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セレクタ「+」プラスの使い方でした。

「この記事の内容がよくわからなかった…」「なんかうまくいかなかった…」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。
わからないまま突き進むより基本を学ぶのが結局近道です。

CSSやhtmlをマンガで学ぶ