間接セレクタ (E ~ F)
CSS3で定義された、間接セレクタは親要素が同じになる兄弟関係の弟に適用されるセレクタです。
隣接セレクタが直後の弟に対して、間接セレクタは兄弟関係に有れば、間に別の要素が入っても適用されます。また、隣接セレクタのように直後の弟にも適用されます。
この間接セレクタは、各単純セレクタをチルダ(~
)で区切って書きます。隣接セレクタや間接セレクタ同様、チルダ(~
)の前後に半角スペースなどの空白類文字を入れる事ができます。
- 対応ブラウザ
-
間接セレクタのサンプル
h3 {
margin-top: 15px;
}
h3 ~ h3 {
margint-top: 50px;
}
<h3>間接セレクタとは</h3>
<h4>とても簡易な説明</h4>
<p>兄弟関係の弟の要素に適用されます。</p>
<h3>リンク</h3>
<p>各セレクタ説明へのリンクです。</p>
<ul>
<li><a href="universal_selector.shtml">ユニバーサルセレクタ</a></li>
<li><a href="type_selector.shtml">タイプセレクタ</a></li>
</ul>
<h3>外部リンク</h3>
<p>外部リンクです。</p>
<div class="item">
<h3>小見出し</h3>
<p>テキスト</p>
</div>
間接セレクタを使う事によって、兄弟関係の2度目以降に出現するh3要素全てにmargin-top: 50px;
を適用させることが可能です。
最後の小見出し部分のh3要素は、div class="item"
内にあるため、兄弟関係では無いので適用されません。
このサンプルを今見ているブラウザで表示すると以下のようになります。
- サンプルのブラウザ上の表示
このような感じで、余白の間隔を取るのに使うと便利かもしれません。
例によってIE6では・・・ですが、CSS3の対応が遅れているIE7, 8でもこのセレクタには対応しているので、すぐにでも使って行けるセレクタだと思います。