webruaryのデモページ

隣接セレクタ

css

h3+p{
  background:#f00;
}

html

<h3>h3さん</h3>
<p>
  h3と隣同士のpタグ。
  ここは背景が赤くなる。
</p>

<h4>h4さん</h4>
<p>
  h4と隣同士のpタグ。
  ここは背景がかわらない。
</p>

css

h3.hohoge+p{
  background:#f00;
}

html

<h3>classなしh3さん</h3>
<p>
  ここは背景がかわらない。
</p>

<h3 class="hohoge01">classありh3さん</h3>
<p>
  うぉおお～おおッ　うぉおお～おおッ　だっだだだっだっだぁ　お前ｔ(ry
</p>

間接セレクタ

css

div.box3 p~p{
  background:#f00;
}

html

<div class="box3">
  <h3>h3さん</h3>
  <p>
    ここは背景がかわらない。
  </p>
  
  <h3>h3さん</h3>
  <p>
    ここは背景が赤くなる。
  </p>
</div>

css

div.box4 h4~p{
  background:#f00;
}

html

<div class="box4">
  <h3>h3さん</h3>
  <p>
    ここは背景がかわらない。
  </p>
  
  <h3>h3さん</h3>
  <p>
    2番目の<p>だけどここも背景は変わらない。
  </p>
  
  <h4>h4さん</h4>
  <p>
    <h4>以降に出てくる<p>の背景は赤くなる
  </p>
  <p>
    ぴぃぴぃぴぃ～ぴぃぴぃぴぃ～…ろくなｍ(ry
  </p>
</div>

css

div.box5 h3.hohoge02~p{
  background:#f00;
}

html

<div class="box5">
  <h3>classなしh3さん</h3>
  <p>
    ここは背景がかわらない。
  </p>
  
  <h3>classなしh3さん</h3>
  <p>
    ここも背景は変わらない。
  </p>
  
  <h3 class="hohoge02">classありh3さん</h3>
  <p>
    背景が変わる。
  </p>
  
  <h3>classなしh3さん</h3>
  <p>
    赤いけど3倍早いわけじゃない。
  </p>
</div>