隣接セレクタや間接セレクタを利用すると、同じ親要素を持つ兄弟要素にスタイルを指定することができます。

サンプル（最下段）は、このセレクタの基準になるh3要素やスタイルが適用されるp要素をなどを含んだdiv要素です。サンプル（１）、サンプル（２）、サンプル（３）ともに同じhtmlの構成で、サンプル（２）のh3要素には隣接セレクタのclassが、サンプル（３）のh3要素には間接セレクタのclassがそれぞれ付いているのが違いです。

 

サンプル（１）のhtmlソース

    <div class="sample">
        <p>テストサンプル01（p要素）</p>
        <h3 style="color:#93e">【h3要素】</h3>
        <p>テストサンプル02（p要素）</p>
        <a href="#">ダミーのa要素</a>
        <p>テストサンプル03（p要素）</p>
    </div>

 

サンプル（２）・隣接セレクタ（E + F）

隣接セレクタは、同じ親要素を持つ兄弟要素のうち、隣接する直後の指定した種類の弟要素にのみにスタイルを適用します。「テストサンプル02（p要素）」だけが対象となり赤色boldの文字に上側マージンが大きくなります。

サンプル（２）のCSSソース

  .sample h3.test + p  { 
      margin-top:30px;
      font-weight:bold;
      color:red;
  }

 

サンプル（３）・間接セレクタ（E ~ F）

間接セレクタは、同じ親要素を持つ兄弟要素のうち、指定の種類のすべての弟要素にスタイルを適用します。兄要素は対象外です。また、弟要素なら間に他の種類の要素があっても適用対象になります。その結果、「テストサンプル02（p要素）」と「テストサンプル03（p要素）」が対象となり赤色boldの文字に上側マージンが大きくなります。

サンプル（３）のCSSソース

  .sample h3.test ~ p  { 
      margin-top:30px;
      font-weight:bold;
      color:red;
  }

 

サンプル（１）・隣接セレクタ、間接セレクタの指定無し

 

サンプル（２）の結果

 

サンプル（３）の結果