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

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

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

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

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

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

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

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

htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】

htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。

この記事を読む

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

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

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

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

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

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

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

p{margin: 2em 0 1em}
 

【使用例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に適用されます。それより下のFには適用されません。

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

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

htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】

htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。

この記事を読む