CSSの隣接セレクター
隣接セレクター + は、
その直上の隣接要素に基づいて要素を選択することを可能にします。
構文
セレクター1 + セレクター2 {
}
例
h2 タグの直後に位置するすべての
p タグを対象に、それらを赤色に着色してみましょう:
<h2>text</h2>
<p>
+
</p>
<p>
-
</p>
<p>
-
</p>
h2 + p {
color: red;
}
:
例
.test クラスを持つ要素の直後に位置するすべての
p タグを対象に、それらを赤色に着色してみましょう:
<p class="test">
text
</p>
<p>
+
</p>
<p>
-
</p>
.test + p {
color: red;
}
:
例
.test クラスを持つ要素の直後に位置するすべての
.elem クラスを持つ要素を対象に、
それらを赤色に着色してみましょう:
<p class="test">
text
</p>
<p class="elem">
+
</p>
<p>
-
</p>
.test + .elem {
color: red;
}
:
関連項目
-
子孫セレクター,
直接の包含関係に基づいて要素を選択することを可能にします -
子孫セレクター,
その親要素に基づいて要素を選択することを可能にします -
一般兄弟セレクター,
指定された要素の後にある要素を選択することを可能にします -
ユニバーサルセレクター,
すべての要素を選択することを可能にします
