:nth-childの基本とIE対応
リスト、テーブルやカラムを並べるときに、:nth-child は大活躍の疑似クラス。
使い方の基本
○番目のエレメントを指定する
※3番目の場合
li:nth-child(3){ color:red; }
奇数、偶数を指定する
※奇数
li:nth-child(odd){ color:red; } 又は li:nth-child(1+2n){ color:red; }
※偶数
li:nth-child(even){ color:red; } 又は li:nth-child(2n){ color:red; }
○番目以降をすべて指定する
※3番目以降を指定
li:nth-child(n+2){ color:red; }
IE8以下での対応
ハックを利用する
3番目を指定する場合
ul>*:first-child + * + * { color : red; }
:first-childは ie8に対応しています。
jsを使いたくない場合はこの方法で。でも○番目ごとになどは難しい。
jQueryで対応する
jqueryで「addClass」を定義して対応することができます。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $("li:nth-child(3n)") .addClass("li-third"); }); </script>
3つごとのliに「li-third」というクラスが付加されます。
nth-childだけ対応させればいいだけなら、直接記述する方法でもいいのかも。
Selectivizrを利用する
css3セレクタをIE6~IE8に対応させることができるjavascriptライブラリです。
nth-child以外にも適用させたいcss3スタイルがあればこちらの方がいいですよね。
※利用するときはjqueryも一緒に(一緒に利用するライブラリによって、使えるcss3も違ってきます。詳しくは、selectivizrのトップページに表示あり)