隣接セレクタ。

CSSでのセレクタ(選択子)の一つである、隣接セレクタに関して解説します。

隣接セレクタとは。

隣接セレクタとは、ある要素の直後にある要素を対象とするセレクタです。

直下セレクタ(子セレクタ)や隣接セレクタと違って、包含関係で判断するのではない事に注意して下さい。

隣接セレクタの書式は、

直前要素セレクタ+要素セレクタ

と、「+」で区切ります。

このとき、直前セレクタ、要素セレクタとも任意のセレクタが使えます。

例えば、<h1>要素に続く<p>要素にスタイルを適用する場合は、

h1+p { … }

と記述します。

この場合、

<h1> …</h1>
<p> … <p>

と言う関係になっている<p>要素は対象となりますが、

<h1> …</h1>
<p> 一番目(有効) <p>
<p> 二番目以降(無効) <p>

と言う関係になっている場合、二番目以降の<p>要素は<h1>要素に隣接していないため対象外となります。

隣接セレクタは、

では機能しません。

特に、インターネットエクスプローラのヴァージョンに依っては、下位セレクタ(子孫セレクタ)と誤認するものもあります。

WAP 2.0では、隣接セレクタは仕様に含まれておりません。