CSS入門 | CSSセレクター | 兄弟セレクター

兄弟セレクターは、兄弟関係にある要素の中から、該当要素より後ろに存在する特定タイプの要素をすべて選択する。

兄弟関係とは、HTML要素の階層構造で同じ親要素を持つ要素を意味する。このような兄弟関係にある要素を兄弟要素と呼ぶ。

一般兄弟セレクター

一般兄弟セレクターは、該当要素と兄弟関係にあり、該当要素より後ろに存在する特定タイプの要素をすべて選択する。

次の例は、すべての<div>タグと兄弟関係にある要素の中から、<div>タグより後ろに存在する<p>タグをすべて選択する例である。

div ~ p {スタイル;}

<style>
    div ~ p { background-color: #FFE4E1; }
</style>

英語でadjacentは、隣接した、近いという意味を持つ。隣接兄弟セレクターは、該当要素と兄弟関係にあり、該当要素のすぐ後ろに存在する特定タイプの要素をすべて選択する。

次の例は、すべての<div>タグと兄弟関係にある要素の中から、<div>タグのすぐ後ろに存在する<p>タグをすべて選択する例である。

div + p {スタイル;}

<style>
    div + p { background-color: #FFE4E1; }
</style>