IE6~8でCSS3セレクタに対応
IE6～8ではCSS3セレクタにほとんど対応していません。
そこでIE6～8でCSS3に対応させるjsライブラリをご紹介。
Selectivizr – CSS3 pseudo-class and attribute selectors for IE 6-8
jQueryやPrototype.jsなどのライブラリと一緒に使用します。
jQueryを使用する場合
<script type="text/javascript" src="jquery.js"></script> <!--[if (gte IE 6)&(lte IE 8)]> <script type="text/javascript" src="selectivizr.js"></script> <![endif]-->
使用するライブラリによって使えるセレクタの種類が変わってくるので、その点は注意が必要です。
試しにサンプルデータを作成してみました。
CSS3セレクタの:nth-child(n)を使用し、tableの奇数列の場合に背景色が付くよう指定しました。
CSSは以下のように記述しました。
.sample {
width:300px;
}
.sample th {
width:80px;
border:solid 1px #CCC;
padding:5px;
}
.sample td {
width:200px;
border:solid 1px #CCC;
padding:5px;
}
.sample tr:nth-child(odd) {
background-color:#EEE;
}
