IE8ではnth-childが非対応。どうしても使いたい場合の代替方法について

仕事で最近知りましたが、IE8ではCSSのnth-childやlast-childを使った要素の指定ができません。それくらい対応しているものだと思っていましたが、さすがはIE。侮れません。

以下は、nth-childをどうしても使いたい場合の設定方法になります。

以下のコードでIE8でも「nth-child」と似たような要素の指定が可能です。

HTML


<ul>
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
</ul>

CSS


ul li:first-child+*+*{
    color:red;
}

IE8では「first-child」のみ使えるようで、「+*」で次の要素という意味になるため、指定したい要素分「+*」を追加して設定します。

ちなみに上記と同じ設定を「nth-child」で定義すると、以下のようになります。


ul li:nth-child(3){
    color:red;
}

「:first-child+*+*」で指定。

「:nth-child(3)」で指定。

個人開発でIE8を対応するようなことはほとんどありませんが、仕事ではまだまだ普通にあったりするので注意が必要です。