[CSS]first-childとlast-child、どっちを使うの？first-childでしょ！

とまータイトルで結論まで言っちゃってますけどね。
CSS大好きなみんなは常識だよね。

なぜlast-childじゃなくてfirst-childなの？

いろいろ御託を並べてみたいんだけど答えは簡単

IE7でもIE8で大丈夫！

だからです。以上！

で終わっても仕方ないのでサンプルを少々。

まずはダメなlast-child

See the Pen domZKE by mitsuki sagayama (@sagayama) on CodePen.

これだとIE8以下は一番下のborderが表示されます。

そこで・・・

first-childを使っちゃおう！

See the Pen XbEzBY by mitsuki sagayama (@sagayama) on CodePen.

これでIE7でもIE8でも大丈夫。

違いがわかりにくいので補足すると

last-childの場合
.nav01 ul li a {
    display: block;
    padding: 1em;
    background: #eee;
    text-decoration: none;
    border-bottom: 1px dotted #888;/* ここが違うよ */
}
.nav01 ul li:last-child a {/* ここが違うよ */
    border: none;
}

first-childの場合
.nav01 ul li a {
    display: block;
    padding: 1em;
    background: #eee;
    text-decoration: none;
    border-top: 1px dotted #888;/* ここが違うよ */
}
.nav01 ul li:first-child a {/* ここが違うよ */
    border: none;
}

まとめ

いかがでしたか？
今回はちょっと初心に戻ったポストでした。でもちょっとCSSの落とし穴的な。

こういうちょっとしたことでIEを攻略できてしまうんですからCSSって奥が深いですねー。