IE8でnth-childを使えるようにする

HTML5とCSS3の普及により、表現できる所はなるべくCSSで対応させることにしているのですが、旧ブラウザでは対応していない指定がたくさんあります。その中で、IE8でnth-childを使えるようにするために行った方法をご紹介します。

IE8ではnth-childが使えません

結論から言うとIE8では「:first-child」は使えるのに「:last-child」と「:nth-child」は使えません。はい、困りました!
「:nth-last-child(n)」で表現したい所など、まず上手くいくはずがありません。クラス名を付ければ対応できますが、そうもいかない事案も発生する事もあります。そこで何か手はないものかと調べて見たら、ありました!しかもCSSの記述のみで対応可能という事なので実践してみました。

例えば

<div class="list">
    <ul>
       <li>リスト1</li>
       <li>リスト2</li>
       <li>リスト3</li>
    </ul>
</div>

とした時に、「リスト3」のみbackground-colorでyellowを適用させたいとします。
これに対してのCSSに必要な記述は、通常なら

div.list ul li:last-child {
       background-color: yellow;
}

もしくは

div.list ul li:nth-child(3) {
       background-color: yellow;
}

と指定したいところですが、以下の様に記述してみました。

div.list ul > *:first-child + * + * {
       background-color: yellow;
}

すると、指定通り背景カラーが適用されました。

:first-childでの指定後

記述の解釈は

<li>リスト1</li> <!-- :first-child」の部分 -->
<li>リスト2</li> <!-- + * 1つ目 -->
<li>リスト3</li> <!-- + * 2つ目 -->

「+ *」の数で調節可能と言う事ですね。
(なお、IE10・9・8とChromeとFirefoxでは対応するのを確認しました。)

ただ難点があるとすれば、掛けたい要素が下の方にある場合が大変というところでしょうか。 しかし、この方法で何とか対応できることが分かったので、「どうしてもクラス指定以外の対処でやりたい!」と言う場面があった時に使って頂くと良いと思います。

参考サイト:CSS:Internet Explorer 7-8 nth-child hack