隣接セレクタ（Adjacent sibling selectors）

 

隣接セレクタはE1 +E2 という形式の構文（プラス記号 "+" で区切られた2つ以上の単純セレクタ）から構成されます。この場合，E2 がセレクタの主体になり，このセレクタはE1 とE2 の親要素が同じ（つまり兄弟）で，なおかつE2 がE1直後に後続する場合（つまり直後の弟である場合）にマッチします。このセレクタは要素の前後関係によって，隣接するブロック間の垂直マージンを調整したい場合などに有効です。

次例は，body を親要素として持つ h2 に隣接する p にマッチします。

body > h2 + p { border: dotted gray; }

body要素内でh2の直後のp要素を

<body>
<h1>セレクタ</h1>
<h2>隣接セレクタ</h2>
<p>兄弟関係にある要素の弟にマッチする。</p>
<p>兄弟でも隣接しない弟にはマッチしない。</p>
<p> … </p>
</body>

次例では，h1とその直後のh2 の間にある垂直マージンを削減しています。

h1 + h2 { margin-top: -5mm; }

<body>
<h1>隣接セレクタ</h1>
<h2>隣接セレクタの概要</h2>
<p> … </p>
<h2>隣接セレクタの例</h2>
<p> … </p>
</body>