【隣接セレクタ】すぐ後に現れる要素にスタイルを適用

隣接セレクタ(E + F)では、同じ親要素を持っている兄弟関係にある要素のうち、ある要素のすぐ後に現れる直接の弟要素に対してスタイルを適用することができます。

※要素と要素が直接隣接している場合に、直後の弟(後の要素)に対して適用します。

例えばh1 + p{}と指定した場合であれば、h1要素のすぐあとに現れるp要素に対してのみスタイル適用されます。 ただし、h1とpの間に他の要素がある場合は適用されません。

また同じ親要素を持っている要素の事を兄弟と言い、先にある要素が兄、後にある要素が弟となります。 間に他の要素が入っている場合でも、弟という事にはなりますが、すぐ後に現れる直接の弟という事にはなりません。 ですのでそういった場合には適用されませんので注意して下さい。

このように隣接セレクタ(E + F)では、両方のシンプルセレクタが同じ親要素を持つ場合に、シンプルセレクタを「+」で区切る事で、前のシンプルセレクタの直後に現れる後のシンプルセレクタに対してのみスタイルを適用させる事ができます。

なお「+」で区切る際は、前後に半角スペースを入れても入れなくても問題ありません。 また隣接セレクタは、Internet Explorer6には対応していませんので注意して下さい。

書式

  • セレクタ + セレクタ {プロパティ名:値;} ……… 直後に隣接している要素に適用

使用した時の例

h4 + p {color: red;}
<h4>見出しh4</h4>
  <p>テキストテキスト</p>
  <p>テキストテキスト</p>

<h4>見出しh4</h4>
<div>
  <p>テキストテキスト</p>
</div>

ブラウザ上の表示例

見出しh4

テキストテキスト

テキストテキスト

見出しh4

テキストテキスト

解説 : 2つ目のh4とpの間にはdivが入っています。このためpは直接隣接していないので、スタイルが適用されません。

対応ブラウザなどのデータ

適用対象 直後に隣接している要素
対応ブラウザ Internet Explorer7 , Google Chrome , Firefox , Opera , Safari

関連情報