:nth-childの基本とIE対応

2015-04-18

リスト、テーブルやカラムを並べるときに、: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;
}

 ○番目以降をすべて指定する
※３番目以降を指定

li:nth-child(n+2){
	color:red;
}

 IE8以下での対応

ハックを利用する
３番目を指定する場合

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>

３つごとのliに「li-third」というクラスが付加されます。
nth-childだけ対応させればいいだけなら、直接記述する方法でもいいのかも。

Selectivizrを利用する

css3セレクタをIE6~IE8に対応させることができるjavascriptライブラリです。
nth-child以外にも適用させたいcss3スタイルがあればこちらの方がいいですよね。

http://selectivizr.com/

※利用するときはjqueryも一緒に（一緒に利用するライブラリによって、使えるcss3も違ってきます。詳しくは、selectivizrのトップページに表示あり）