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; }
すると、指定通り背景カラーが適用されました。

記述の解釈は
<li>リスト1</li> <!-- :first-child」の部分 --> <li>リスト2</li> <!-- + * 1つ目 --> <li>リスト3</li> <!-- + * 2つ目 -->
「+ *」の数で調節可能と言う事ですね。
(なお、IE10・9・8とChromeとFirefoxでは対応するのを確認しました。)
ただ難点があるとすれば、掛けたい要素が下の方にある場合が大変というところでしょうか。 しかし、この方法で何とか対応できることが分かったので、「どうしてもクラス指定以外の対処でやりたい!」と言う場面があった時に使って頂くと良いと思います。
[…] IE8でnth-childを使えるようにする | たすデザイン […]