nth-child

:nth-childの基本とIE対応

リスト、テーブルやカラムを並べるときに、:nth-child は大活躍の疑似クラス。

使い方の基本

○番目のエレメントを指定する
※3番目の場合

 奇数、偶数を指定する

※奇数

※偶数

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

 IE8以下での対応

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

:first-childは ie8に対応しています。
jsを使いたくない場合はこの方法で。でも○番目ごとになどは難しい。

jQueryで対応する

jqueryで「addClass」を定義して対応することができます。

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

Selectivizrを利用する

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

http://selectivizr.com/

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

Selectivizr   CSS3 pseudo class and attribute selectors for IE 6 8

nth-child、last-childをie8でも使いたい

カラムを横並びにしたいときに:nth-childは便利です。

でもIE8以下は対応してません。

※ :first-child は、ie7から対応してます。

どうしてもie8でもnth-child擬似クラスを使いたいときのハック。

HTML

CSS(ie8 非対応)

この状態でie8で確認すると…

ie8_pre

カラム落ちしてます。

ie8に対応させるためには、以下のスタイルシートを付記。

4番めと8番目を「+*」で指定してます。

ie8_after

でも、これだと、カラム数が決まっている場合はいいのですが、もっとカラムが多くなったり、いくつになるかわからない場合は、現実的じゃないですね。

やはりjavascript での対応になるでしょうか

IE8以下でもCSS3に対応する「selectivizr」
http://selectivizr.com/

Selectivizr   CSS3 pseudo class and attribute selectors for IE 6 8

Selevtivizrは、jQurey,mootoolsなどのライブラリが必須です。

また、スタイルシートは外部ファイルとして読み込む必要があるとのこと。