Firefox5におけるnth-childセレクタのバグ

すごい勢いでアップデートを進めるFirefoxですが特定のバージョンにのみ含まれるバグなどもあってかなりの製作者泣かせです。

次のようなHTMLがあり、

<dl>
	<dt>リスト1</dt>
	<dd>リスト1の内容</dd>
	<dt>リスト2</dt>
	<dd>リスト2の内容</dd>
	<dt>リスト3</dt>
	<dd>リスト3の内容</dd>
	<dt>リスト4</dt>
	<dd>リスト4の内容</dd>
</dl>

次のようなセレクタを指定した場合、

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

通常は「<dt>リスト2</dt>」が赤色になるのですが、Firefox5だけ「<dt>リスト3</dt>」が赤色になります。nth-of-typeセレクタと同じ動きですね。Firefox4やFirefox6ではちゃんと「<dt>リスト2</dt>」が赤色になります。

追記

nth-childセレクタがnth-of-typeセレクタと同じ動きになっている意味ではなく、dt:nth-child(3)とdt:nth-of-type(3)が同じ要素を示しているという意味でしたが誤解を招きそうななのでdelしときます。

TwitterやSBMでここらへんのバグ情報がかなと教えていただきました。
https://bugzilla.mozilla.org/show_bug.cgi?id=667520

関連エントリー

Firebugで始めるCSSデバッグ

スポンサードリンク

«CSS Nite in TAKAMATSU, Vol.5は「スマートフォン特集」 | メイン | 第6回リクリセミナー『スマートフォン向けサイト制作の「これから」を考える』»