CSSでのセレクタ(選択子)の一つである、隣接セレクタに関して解説します。
隣接セレクタとは、ある要素の直後にある要素を対象とするセレクタです。
直下セレクタ(子セレクタ)や隣接セレクタと違って、包含関係で判断するのではない事に注意して下さい。
隣接セレクタの書式は、
直前要素セレクタ+要素セレクタ
と、「+」で区切ります。
このとき、直前セレクタ、要素セレクタとも任意のセレクタが使えます。
例えば、<h1>要素に続く<p>要素にスタイルを適用する場合は、
h1+p {…}
と記述します。
この場合、
<h1>…</h1><p>…<p>
と言う関係になっている<p>要素は対象となりますが、
<h1>…</h1><p>一番目(有効)<p><p>二番目以降(無効)<p>
と言う関係になっている場合、二番目以降の<p>要素は<h1>要素に隣接していないため対象外となります。
隣接セレクタは、
では機能しません。
特に、インターネットエクスプローラのヴァージョンに依っては、下位セレクタ(子孫セレクタ)と誤認するものもあります。
WAP 2.0では、隣接セレクタは仕様に含まれておりません。
