CSSのセレクタ徹底解説！隣接セレクタと兄弟セレクタの違いを初心者向けに解説

隣接セレクタ（+）と兄弟セレクタ（~）の使い方と違い

先生と生徒の会話形式で理解しよう

生徒

「CSSで特定のタグだけにデザインをつけたいときって、どうすればいいですか？」

先生

「CSSでは『セレクタ』というものを使って、特定のタグを選んでデザインできますよ。」

生徒

「セレクタってたくさんありますよね？中でも『+（プラス）』とか『~（チルダ）』って何に使うんですか？」

先生

「いい質問ですね。これは『隣接セレクタ』と『兄弟セレクタ』と呼ばれるもので、それぞれ違いがあります。わかりやすく説明しますね！」

1. CSSの隣接セレクタとは？

隣接セレクタとは、ある要素のすぐ後ろにある兄弟要素を指定してスタイルを適用するCSSセレクタです。

ここでいう「兄弟要素（きょうだいようそ）」とは、同じ親要素の中にある別の要素のことです。

記号としては+（プラス記号）を使います。

たとえば、以下のようなHTMLがあるとします。


<style>
p + p {
    color: red;
}
</style>

<p>1つ目の段落</p>
<p>2つ目の段落（赤くなります）</p>
<p>3つ目の段落（赤くなりません）</p>

ブラウザ表示

この例では、1つ目の<p>タグのすぐ後ろにある2つ目の<p>タグだけにスタイル（文字色：赤）が適用されます。

つまり、p + pと書くことで、「ある

タグのすぐ次の

タグ」にだけCSSを効かせられるのです。

このセレクタは、間に別のタグが入ると効かなくなります。すぐ後にあることが条件です。

2. CSSの兄弟セレクタとは？

兄弟セレクタとは、ある要素の後に出てくるすべての兄弟要素を指定できるCSSの書き方です。

記号には~（チルダ記号）を使います。

こちらも「兄弟要素」同士ですが、「すぐ後ろ」だけではなく「後に続くすべての同レベルの要素」にスタイルが当たります。


<style>
p ~ p {
    color: blue;
}
</style>

<p>1つ目の段落</p>
<p>2つ目の段落（青くなります）</p>
<p>3つ目の段落（青くなります）</p>

ブラウザ表示

この場合、最初の

タグの後に出てくるすべての

タグにCSSが適用され、2つ目と3つ目の段落が青く表示されます。

兄弟セレクタ（~）は、指定されたタグが後ろに続いていれば、間に別のタグがあってもスタイルが効きます。

3. 隣接セレクタと兄弟セレクタの違いを図解で理解

イメージとして、以下のような関係になります：

隣接セレクタ（+）は、「すぐ隣」にある1つの要素だけにスタイルを当てる。
兄弟セレクタ（~）は、「後ろに並ぶすべての同じ兄弟」にスタイルを当てる。

この違いを「お隣さん」と「ご近所さん」に例えるとわかりやすいです。

隣接セレクタは「すぐ隣の家の人」に話しかけるイメージ。
兄弟セレクタは「自分より後にある家の人すべて」に話しかけるイメージです。

4. 実践練習：ボタンの下にある段落だけ色を変える

ここでは、実際にボタンの後にある段落だけを色を変える方法を紹介します。

HTMLとCSSで以下のように記述することで、ボタンのすぐ下にある

タグの色を変えることができます。


<style>
button + p {
    color: green;
}
</style>

<button>クリックしてね</button>
<p>この段落は緑になります</p>
<p>この段落は緑になりません</p>

ブラウザ表示

このように、隣接セレクタ（+）を使うことで、特定のHTMLタグの直後だけにCSSのスタイルを当てることができます。

5. よくあるミスと注意点

隣接セレクタや兄弟セレクタを使うとき、よくある間違いがあります。

タグの間に空の要素やコメントが入っていると、隣接セレクタは効かなくなることがある。
兄弟セレクタは前の要素と同じ親要素を持っていないと効かない。

HTMLの構造が正しく組まれていることが、CSSの効果を出すためにはとても重要です。

6. 隣接セレクタと兄弟セレクタは使い分けがポイント

同じように見えて、隣接セレクタ（+）と兄弟セレクタ（~）はまったく違う場面で使います。

たとえば次のように使い分けましょう。

「すぐ下にある特定のタグだけにスタイルを当てたい」とき → 隣接セレクタ（+）
「その後に続く同じタグすべてにスタイルを当てたい」とき → 兄弟セレクタ（~）

これを覚えることで、HTMLとCSSの組み合わせがさらに思い通りにできるようになります。

まとめ

隣接セレクタと兄弟セレクタをしっかり振り返ろう

この記事では、CSSセレクタの中でも少し応用的な存在である「隣接セレクタ」と「兄弟セレクタ」について、初心者の方にもイメージしやすいように丁寧に解説してきました。CSSセレクタは、HTMLのどの要素にスタイルを適用するかを決める重要な仕組みですが、隣接セレクタと兄弟セレクタを理解することで、より細かく、意図したデザイン指定ができるようになります。

隣接セレクタは「ある要素のすぐ直後にある兄弟要素」だけを対象にするセレクタです。プラス記号を使って指定し、条件として「すぐ隣にあること」が求められます。そのため、特定の要素の直後だけに装飾を加えたい場合にとても便利です。見出しの直後の段落だけ色を変えたい、ボタンのすぐ下の説明文だけを強調したい、こうした場面で隣接セレクタは力を発揮します。

一方、兄弟セレクタは「ある要素の後に続く同じ階層の兄弟要素すべて」を対象にするセレクタです。チルダ記号を使って指定し、間に他の要素が入っていても、同じ親要素の中で後に並んでいればスタイルが適用されます。見出し以降に並ぶ段落すべてを同じデザインにしたい場合など、繰り返し要素をまとめて指定したいときに役立ちます。

この二つのセレクタは見た目が似ているため混乱しやすいですが、「すぐ隣だけ」か「後ろ全部」かという違いを意識すると理解しやすくなります。HTML構造をしっかり意識しながらCSSを書くことで、無駄なクラスやIDを増やさず、読みやすく管理しやすいコードを書くことができるようになります。

理解を深めるためのまとめサンプル

ここで、隣接セレクタと兄弟セレクタの違いを一度に確認できるサンプルを見てみましょう。どの要素にどのCSSが適用されるのかを、実際のコードで確認することが理解への近道です。


<style>
h3 + p {
    color: green;
}
h3 ~ p {
    background-color: #eef;
}
</style>

<h3>見出しです</h3>
<p>この段落は隣接セレクタと兄弟セレクタの両方が効きます。</p>
<p>この段落は兄弟セレクタのみが効きます。</p>
<p>この段落も兄弟セレクタのみが効きます。</p>

ブラウザ表示

この例では、最初の段落は見出しの直後にあるため、隣接セレクタと兄弟セレクタの両方が適用されます。その後に続く段落は、兄弟セレクタのみが適用されるため、背景色だけが変わります。このように、CSSセレクタを組み合わせて使うことで、HTML構造を活かした柔軟なデザイン指定が可能になります。

先生と生徒の振り返り会話

生徒

「隣接セレクタと兄弟セレクタの違いが、やっとはっきり分かりました。すぐ隣か、後ろ全部かなんですね。」

先生

「その理解で大丈夫です。HTMLの並びを意識できるようになると、CSSが一気に書きやすくなりますよ。」

生徒

「クラスを付けなくても、構造だけでデザインを指定できるのが便利だと感じました。」

先生

「そうですね。セレクタをうまく使えば、コードもシンプルになります。無理にクラスを増やさなくて済むのもメリットです。」

生徒