CSSの隣接セレクター

隣接セレクター + は、 その直上の隣接要素に基づいて要素を選択することを可能にします。

構文

cssセレクター1 + セレクター2 {
  
}

例

h2 タグの直後に位置するすべての p タグを対象に、それらを赤色に着色してみましょう:

html<h2>text</h2>
<p>
  +
</p>
<p>
  -
</p>
<p>
  -
</p>

cssh2 + p {
  color: red;
}

Результат:

例

.test クラスを持つ要素の直後に位置するすべての p タグを対象に、それらを赤色に着色してみましょう:

html<p class="test">
  text
</p>
<p>
  +
</p>
<p>
  -
</p>

css.test + p {
  color: red;
}

Результат:

例

.test クラスを持つ要素の直後に位置するすべての .elem クラスを持つ要素を対象に、 それらを赤色に着色してみましょう:

html<p class="test">
  text
</p>
<p class="elem">
  +
</p>
<p>
  -
</p>

css.test + .elem {
  color: red;
}

Результат:

関連項目