隣接セレクタ (E + F)
隣接セレクタは、要素と要素が直接隣接している場合(直後の弟)に適用されるセレクタです。このため、要素と要素の間に別の要素が有る場合は対象になりません。
親要素が同じになる要素の事を兄弟といい、先に書かれているのが兄になり後に書かれているのは弟になります。間に別の要素が入っている場合も弟である事に変わり有りませんがその場合は「直後の弟」にはなりません。このような兄弟関係から、隣接兄弟セレクタとも呼ばれます。
この隣接セレクタは、各単純セレクタをプラス(+
)で区切って書きます。子セレクタ同様、プラス(+
)の前後に半角スペースなどの空白類文字を入れる事ができます。
- 対応ブラウザ
-
隣接セレクタのサンプル
p + ul {
margin-top: 50px;
}
<p>テキスト</p>
<ul>
<li>p要素に隣接しているul要素</li>
</ul>
<p>テキスト</p>
<h4>子見出し</h4>
<ul>
<li>h4要素と隣接しているため適用されない。</li>
</ul>
<p>テキスト</p>
p要素とul要素が隣接している(直接の兄弟)ため、ul要素にスタイルが適用されますが、h4要素がp要素とul要素の間に入っている方は直接隣接していないので、スタイルは適用されません。
このサンプルを今見ているブラウザで表示すると以下のようになります。
- サンプルのブラウザ上の表示
-
テキスト
- p要素に隣接しているul要素
テキスト
子見出し
- h4要素と隣接しているため適用されない。
テキスト
h4要素と隣接しているul要素は直後の弟にならないため、margin-top: 50px;
のスタイルが適用されないのが確認できます。また、隣接セレクタも残念ながらIE6では対応していません。
隣接セレクタは上手く使えば、クラスセレクタなどを使わずに余白の間隔を取ったり出来るので、文書を見やすくする事が可能ですが、思いがけない仕様変更などでスタイルが適用されないと言った事も有るので注意が必要です。