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では対応するのを確認しました。）

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

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