:nth-childの使い方とIEへの対応方法を解説！
CSSの:nth-childの擬似クラスは兄弟要素のグループ内のn番目を表す事が出来ます。しかしIE8などでは:nth-childに通常対応していません。IEで:nth-childに対応するにはどうしたらいいのかやり方をサンプルコード付きで解説します。
:nth-childの使い方
:nth-childはCSSの擬似クラスの１つで引数で指定したキーワードや整数・数式から一致する位置にある要素（兄弟要素のグループ内の位置）を表します。
例えば下記のように:nth-childは使うことが出来ます。
上記のサンプルコードではキーワードでodd（奇数）を指定した場合や、整数・数式で:nth-childを指定した場合でスタイルを定義しています。このように:nth-childでは兄弟要素のグループ内のn番目というのを引数で指定して使います。
さてこの:nth-childですが、IEでは上手く効きません。（参考）
ではIEの場合ではどのように:nth-childと同じ様なやり方をとるのか今回はサンプルコード付きで解説します。
:nth-childのIEへの対応について
:nth-childのIEへの対応についていくつかやり方がありますので、順番に解説していきます。
Selectivizrを利用する
SelectivizrはCSS3のセレクタをIE6-8で対応させるライブラリです。今回はjQueryと共に利用してみたいと思います。
下記のコードをhead要素内に貼り付けましょう。今回jQueryもSelectivizrもCDNを利用しているのですぐ試せます。
Selectivizrを利用するコード
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<!--[if (gte IE 6)&(lte IE 8)]>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/selectivizr/1.0.2/selectivizr-min.js" integrity="sha512-0mXreXYrXoy9laHoypsAOjuSCqh57vY+kIdE46k8Hw0yRY1EhJyHWUEAqfHOTrPkBpsbO39/ZPw5HITv8mLVOA=="></script>
<noscript><link rel="stylesheet" href="CSSファイルのURL" /></noscript>
<![endif]-->上記のコードでSelectivizrが動作し、IE6-8でも:nth-childが動作するようになります。
上記のサンプルコードをVagrantのIE8で検証したキャプチャです。
jQueryで無理やり対応する
こちらはjQueryで無理やり:nth-childと同じ動作でスタイルを適用しようという試みです。
例えば適用したいスタイルが下記とします。
p:nth-child(2n+3) {
color: red;
}これをJavaScriptを使った対応させてみましょう。
上記はIE8でも動作します。IEではCSSの:nth-childの擬似クラスは使えませんが、jQueryを通すことで:nth-childのセレクタが使えるようになります。
（jQueryはIE8以下を考慮し1系を用意しています）
そして、CSSのメソッドでテキストのカラーを赤にしていますが、この部分はclassで用意して、.addClass()でやるのも良いかと思います。
下記は上記のサンプルコードのプレビューをVagrantのIE8で見た結果です。
:nth-childで指定した要素にスタイルが効いているのがわかります。まとめ
いかがでしたでしょうか。本来IE6-8はCSSの擬似クラスの:nth-childは効きませんが、対応させる方法を解説してきました。
今回ご紹介した:nth-childのIEへの対応ですが、いずれもjQueryで1.12の古いバージョンを使用しています。
もしもjQueryがこのバージョンでは他に影響が出るという方はSelectivizrでjQueryではな他のライブラリを選択しましょう。
:nth-childでのスタイルの指定が効いているのがわかります。