first-childとfirst-of-typeの違い（自分用メモ）

2015/06/58

first-childとfirst-of-typeの違いがいまいちよく分からない。今のところの理解をメモ。
last-child、last-of-tyoe、nth()についても似たようなものだ。

first-child は下のような横並びメニューでよく使う。

  | menu1 | menu2 | menu3 | menu5 |

  ul.menu { list-style:none; }
  ul.menu li:after { content:' |'; }
  ul.menu li:first-child:before { content:'| '; }

last-childを使っても似たようなCSSでできる。
first-of-type を使うようなシーンはどんな場合か？

<div id="content">
  <h2>見出し</h2>
  <p>概略</p>  ← ここだけ赤い文字にする
  <p>説明文段落１</p>
  <p>説明文段落１</p>
  <p>説明文段落１</p>
</div>

上のソースで

#content p:first-child { color:red; }

としたのではうまく表示されない。contentの最初の要素が<p>でないから。

#content p:first-of-type { color:red; }

だと最初に出現する<p>要素に適用されるのでうまく表示される。

悩んでいたのは、私は、ブラウザのデフォルトのCSSでそこそこレイアウトが崩れなければよいと思っているので、resetで、下のようなことはほとんどやらない。

* { margin:0; padding:0;}

IE9.jsを使うと *セレクタが効かないという話もチラッと読んだし、色んなブロック要素について再設定するのも面倒だったりして...
ただそうすると下のような通常の文章で困ったことがおきる。

<div id="content">
  <h2>見出し(1)</h2>
  <p>段落
  <p>段落
  <h2>見出し(2)</h2>
  <p>段落
  <p>段落
</div>

大きな見出しだと上下に余白をとったほうが読みやすくなると思うので、ブラウザのデフォルトで通常問題ないのだが、上下に margin が規定されているので、最初の見出し(1)の上にも大きな余白ができてしまう。

また、２カラムレイアウトだと左右のカラムで先頭の要素が違うと上端の高さが揃わなくなるのがブサイクだな〜と思っていた。

そこでどうしたものか悩んでいたが、first-childでなんとかなりそうな気がしてきた。