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>

ってな感じで、classやidをつけた状態でもおｋ。

↓がダメな例。
自分が最初に勘違いしてやってたやり方。

css

div+h3{
  background:#f00;
}

html

<div>
  <h3>ダメな例。</h3>
</div>

ちゃんと終了タグが必要です。あれ？こんな間違いするの自分だけ？

間接セレクタ

同じ親要素内に限りa以降に出てきたbに対して発動。
このセレクタが自分的に結構悩みました…(´･ω･`)

css

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

html

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

↑の様なやり方でも合ってるっちゃぁ合ってる。
つまりは同じ親要素(<div class="hohoge03">)内で<p>以降に出てきた<p>に対してセレクタが発動してる状態。

で、自分が勘違いしてたのは『同じ親要素内の2番目以降に出てくる子要素に対して発動する』だと思ってたこと。
まぁ、自分が最初に参考にしたサイトに「2番目に…」って書いてたりもしたんですが…。

ホントは『同じ親要素内の何かしらのタグ以降に出てくるタグに対して発動』だったっていう。

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>

ちなみに、↓みたいにclassやidをつけた状態でもおｋ。

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>