トップページの中の セレクタの中の 間接セレクタ (E ~ F)

間接セレクタ (E ~ F)

  • 最終更新:2009年6月27日 13:16

CSS3で定義された、間接セレクタは親要素が同じになる兄弟関係の弟に適用されるセレクタです。
隣接セレクタが直後の弟に対して、間接セレクタは兄弟関係に有れば、間に別の要素が入っても適用されます。また、隣接セレクタのように直後の弟にも適用されます。

この間接セレクタは、各単純セレクタをチルダ(~)で区切って書きます。隣接セレクタや間接セレクタ同様、チルダ(~)の前後に半角スペースなどの空白類文字を入れる事ができます。

対応ブラウザ
  • IE6未対応
  • IE7対応
  • IE8対応
  • Firefox3.5対応
  • Opera10対応
  • Safari4対応
  • Chrome3対応

間接セレクタのサンプル

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でもこのセレクタには対応しているので、すぐにでも使って行けるセレクタだと思います。

  • CSS HappyLife
  • underHat
著書(全て共著)

このページの上部へ