CSS隣接セレクタ徹底解説！作り方、使い方、応用例まで初心者にもわかりやすく解説

はじめに

CSSを学び始めた初心者の方々にとって、セレクタは非常に重要な概念です。

本記事では、CSSの隣接セレクタについて初心者目線で徹底的に解説していきます。

作り方、使い方、応用方法やサンプルコード、応用例を紹介していくので、ぜひ参考にしてください。

●CSS隣接セレクタとは？

CSSの隣接セレクタは、ある要素の直後にある特定の要素を対象にスタイルを適用するためのセレクタです。
これを使うことで、HTML要素間の関係性を利用して、特定の要素に対してスタイルを適用することができます。
隣接セレクタの基本的な書き方は、以下の通りです。

要素1 + 要素2 {
  スタイルルール;
}

このコードは、要素1の直後にある要素2に対して、スタイルルールを適用します。

要素1と要素2は、タグ名やクラス名、ID名など、様々な要素を指定することができます。

●隣接セレクタの作り方

隣接セレクタを作成する際は、対象となる要素を+記号で繋げます。

隣接セレクタの作り方をいくつかの例を用いて解説します。

例1: タグ名を使用した隣接セレクタ

h1 + p {
  color: red;
}

この例では、<h1>タグの直後にある<p>タグに対して、文字色を赤にするスタイルが適用されます。

例2: クラス名を使用した隣接セレクタ

.class1 + .class2 {
  font-size: 24px;
}

この例では、.class1クラス名を持つ要素の直後にある.class2クラス名を持つ要素に対して、フォントサイズを24pxにするスタイルが適用されます。

例3: ID名を使用した隣接セレクタ

#id1 + #id2 {
  background-color: yellow;
}

この例では、#id1というID名を持つ要素の直後にある#id2というID名を持つ要素に対して、背景色を黄色にするスタイルが適用されます。

●隣接セレクタの使い方

隣接セレクタは、HTML要素間の関係性を活用してデザインを調整する際に非常に便利です。

隣接セレクタの使い方をいくつかの例で解説します。

例1: リスト項目の最初の要素だけを装飾する

<ul>
  <li>項目1</li>
  <li>項目2</li>
  <li>項目3</li>
</ul>
<!-- HTML -->

ul + li {
  font-weight: bold;
}
/* CSS */

この例では、<ul>要素の直後にある<li>要素（つまり、最初のリスト項目）に対して、太字にするスタイルが適用されます。

例2: 画像の直後にあるキャプションを装飾する

<figure>
  <img src="image.jpg" alt="サンプル画像">
  <figcaption>サンプル画像のキャプション</figcaption>
</figure>
<!-- HTML -->

img + figcaption {
  font-style: italic;
}
/* CSS */

この例では、<img>要素の直後にある<figcaption>要素に対して、斜体にするスタイルが適用されます。

例3: 特定のクラス名を持つ要素の直後にある要素を装飾する

<div class="box1">ボックス1</div>
<div class="box2">ボックス2</div>
<div class="box1">ボックス3</div>
<div>ボックス4</div>
<!-- HTML -->

.box1 + div {
  border: 1px solid red;
}
/* CSS */

この例では、.box1クラス名を持つ<div>要素の直後にある<div>要素に対して、赤い線のボーダーが適用されます。

●隣接セレクタの応用例

隣接セレクタは、さらに複雑な条件で要素を選択する際にも応用できます。

隣接セレクタの応用例をいくつか紹介します。

例1: 同じ階層にある複数の要素を対象にスタイルを適用する

<div class="container">
  <div class="item">アイテム1</div>
  <div class="item">アイテム2</div>
  <div class="item">アイテム3</div>
  <div class="item">アイテム4</div>
</div>
<!-- HTML -->

.item + .item {
  margin-left: 20px;
}
/* CSS */

この例では、.itemクラス名を持つ<div>要素の直後にある.itemクラス名を持つ<div>要素に対して、左側の余白を20pxに設定します。これにより、アイテム間の間隔が一定に保たれます。

例2: テーブルの奇数行・偶数行に異なるスタイルを適用する

<table>
  <tr><td>行1</td></tr>
  <tr><td>行2</td></tr>
  <tr><td>行3</td></tr>
  <tr><td>行4</td></tr>
</table>
<!-- HTML -->

tr:nth-child(odd) + tr {
  background-color: #f2f2f2;
}
/* CSS */

この例では、奇数行（1行目、3行目など）の<tr>要素の直後にある<tr>要素（つまり、偶数行）に対して、背景色を#f2f2f2（薄い灰色）に設定します。

これにより、テーブルの行が交互に色分けされ、見やすくなります。

例3: チェックボックスが選択された時に、ラベルのスタイルを変更する

<input type="checkbox" id="check1">
<label for="check1">チェックボックス1</label>
<!-- HTML -->

input:checked + label {
  font-weight: bold;
  color: blue;
}
/* CSS */

この例では、チェックボックスが選択された状態の<input>要素の直後にある<label>要素に対して、太字かつ青色にするスタイルが適用されます。

これにより、チェックボックスが選択された時に、対応するラベルのスタイルが変更されることで視認性が向上します。

まとめ

本記事では、CSS隣接セレクタについて、作り方、使い方、応用方法やサンプルコード、応用例を初心者目線で徹底的に解説しました。

隣接セレクタは、HTML要素間の関係性を利用して特定の要素に対してスタイルを適用するための強力なツールです。