CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSの隣接兄弟セレクター（+）とは？構文と使い方を実例付きで解説

CSSの隣接兄弟セレクター（Adjacent Sibling Selector）は、ある要素の直後に隣接している兄弟要素を選択するためのセレクターです。最初のセレクターに一致した要素の「すぐ後ろ」に続く要素だけが対象となり、途中に別の要素が挟まっている場合は選択されない点に注意してください。

構文

隣接兄弟セレクターの基本的な書式は次のとおりです。

element + element {
    /*スタイル宣言*/
}

「+」（プラス記号）の左側で基準となる要素を指定し、右側でその直後に隣接する要素を指定します。

例1：div要素に適用する

次の例では、div + div を使って、別のdiv要素の直後に続くdiv要素に対してのみ、角丸や背景色などのスタイルを適用しています。

<!DOCTYPE html>
<html>
<head>
<style>
div {
   margin: 8px;
   height: 50px;
   width: 60px;
   display: flex;
   float: left;
   border-radius: 5%;
   border: 2px solid brown;
   box-shadow: inset 0 2px 12px olivedrab;
}
div + div {
   border-radius: 50%;
   background-color: orchid;
}
</style>
</head>
<body>
<div></div>
<hr>
<div></div>
<div></div>
</body>
</html>

出力結果

上記のコードを実行すると、次のように表示されます。

CSSの隣接兄弟セレクター（+）とは？構文と使い方を実例付きで解説

<hr>タグがdiv要素同士の間に入ることで隣接関係が断たれるため、最初のdivには円形スタイルが適用されず、<hr>の後に続く2つのdivだけがオーキッド色の円形になっていることが確認できます。

例2：span要素に適用する

続いて、インライン要素であるspanに対して隣接兄弟セレクターを使用した例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
<style>
p {
   font-size: 1.5em;
}
span {
   background-color: lavender;
}
span + span {
   background-color: darkseagreen;
}
</style>
</head>
<body>
<p>
<span>Demo text</span>   <span>goes here</span>
</p>
</body>
</html>

出力結果

上記のコードを実行すると、次のように表示されます。

CSSの隣接兄弟セレクター（+）とは？構文と使い方を実例付きで解説

この例では、最初のspanにはラベンダー色、その直後に隣接する2番目のspanにはダークシーグリーンの背景色が適用されます。span + span の条件を満たすのは2番目のspanだけだからです。

まとめ

  • 隣接兄弟セレクターは A + B の形式で、「Aの直後に隣接するB」を選択します。
  • 間に別の要素が挟まると対象外になるため、要素の並び順が重要です。
  • リストやフォームなど、特定の位置にある要素だけスタイルを変えたい場合に非常に便利です。
  1. CSSの高度なセレクター徹底解説｜隣接兄弟・属性・nth-of-typeセレクターの使い方

    CSSには、要素をより細かく指定できる「高度なセレクター」が多数用意されています。代表的なものとして、隣接兄弟セレクター、一般兄弟セレクター、直接の子セレクター（子結合子）、属性セレクター、nth-of-typeセレクターなどがあります。 これらのセレクターを使いこなせるようになると、HTMLに余計なクラスやIDを追加することなく、柔軟かつ効率的にスタイルを適用できるようになります。ここでは、それぞれのセレクターの特徴と使い方を解説します。 CSSの高度なセレクターの種類 1. 隣接兄弟セレクター（+） 「A + B」の形式で記述し、要素Aの直後に隣接している要素Bのみにスタイルを適用しま

  2. CSSで兄弟要素を選択する方法｜隣接兄弟セレクタ（+）と一般兄弟セレクタ（~）の違いを解説

    CSSには、同じ親要素を持つ「兄弟要素」を選択するための結合子が2種類用意されています。1つは隣接兄弟結合子（+）、もう1つは一般兄弟結合子（~）です。それぞれの動作の違いを理解して、目的に応じて使い分けましょう。 隣接兄弟結合子（+）とは 隣接兄弟結合子（+）は、最初のセレクタで指定した要素の直後に隣接している要素だけをマッチさせたい場合に使用します。2つのセレクタは、必ず同じ親要素の子要素である必要があります。 CSSにおける隣接兄弟結合子の構文は以下の通りです。 Selector + Selector { attribute: /*値*/ } 一般兄弟結合子（~）とは 一方、2つ