css3のセレクタについて

質問

質問させてください。

CSS3で疑問に思っていることがあります。

たとえば、
例1）
<div id="sample">
<p>サンプル1</p>
<p>サンプル2</p>
<p>サンプル3</p>
</div>

に対して、cssで
#sample p:nth-cihld(3){ color:red;}
とすればサンプル3だけ赤文字になると思います。

また
例2）
<div id="sample">
<dl>
<dt>サンプル1</dt><dd>sample1</dd>
</dl>
<dl>
<dt>サンプル2</dt><dd>sample2</dd>
</dl>
<dl>
<dt>サンプル3</dt><dd>sample3</dd>
</dl>
</div>

に対して、
#sample dl:nth-cihld(3){ color:red;}
とするとサンプル3　sample3が赤文字になります。
(検証ブラウザはクローム/FF/IE9・10)

IE7・8はCSS3に対応していないので、赤文字になりません。
IE7・8にも対応するようにselectivizr.jsを使用します。

すると
例1はIE7・８で赤文字になりますが、例２は変化なしでした。

これはselectivizr.jsの仕様なのでしょうか。
それとも、厳密に言うとdl要素はdiv要素の子要素には当たらないのでしょうか。

腑に落ちなくてかなり時間を使ってしまいました。
ご教授いただけませんでしょうか。

よろしくお願い致します。

回答No.1

神崎 渉瑠（@taloo）

WindowsXP Home、IE8で試してみましたが、div p:nth-child(3)、div dl:nth-child(3)ともに色が変わりました。
なお、nth-childのスペルミスは修正しています。

nth-childのスペルミスでなければ、質問文に書かれていない所に原因があると思いますので、
全体を確認し直してみてください。

お礼

ありがとうございますm(__)m