【IE8】IE8でもcss3セレクタを諦めない！

リストなんかをマークアップする際に、下のようにリスト同士の境界を罫線で区切ることって、よくあるかと思います。

• リスト1
• リスト2
• リスト3

ul li{
  border-bottom:1px solid #ccc;
}

しかし、よくありがちなのが、最後のリスト下部の罫線が不要なパターン。

• リスト1
• リスト2
• リスト3

これは、こんな感じでcss3セレクタを使えば、一瞬で解決。

ul li{
  border-bottom:1px solid #ccc;
}
ul li:last-child{
  border-bottom:0;
}

しかし、そうは問屋が卸さないとしゃしゃり出てくるのがIE8です。IE8では「:last-child」等のcss3セレクタが使えません。そんな時、大いに助けてくれるのが「selectivizr.js」です！

ダウンロード

こんな感じで読み込むだけで、「:last-child」等のcss3セレクタを使用可能になります。
css3セレクタでマークアップが楽になるシーンはかなり多いと思います。IE8でcss3セレクタ使えない！と諦めていた方は、「selectivizr.js」でIE8でもcss3セレクタ対応のマークアップ生活をはじめてみてはいかがでしょうか。