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

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

CSS隣接セレクタの解説とサンプルコードCSS

 

【サイト内のコードはご自由に個人利用・商用利用いただけます】

このサービスは複数のSSPによる協力の下、運営されています。

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

また、理解しにくい説明や難しい問題に躓いても、JPSMがプログラミングの解説に特化してオリジナルにチューニングした画面右下のAIアシスタントに質問していだければ、特殊な問題でも指示に従い解決できるように作ってあります。

基本的な知識があればカスタムコードを使って機能追加、目的を達成できるように作ってあります。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を凌駕する現役のプログラマチームによって監修されています。

サイト内のコードを共有する場合は、参照元として引用して下さいますと幸いです

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

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要素間の関係性を利用して特定の要素に対してスタイルを適用するための強力なツールです。