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

[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って奥が深いですねー。