CSS Selectors test-suite テスト結果およびダイナミック擬似クラス対応状況一覧 (2009-03-09 現在 )

各ブラウザの CSS のセレクタへの対応状況

CSS Selectors test-suite による各ブラウザの検証結果の一覧表

仕様レベル	セレクタの形式	参照ページ	Fx3	Fx2	Fx1	IE8 RC1	IE7	IE6	O9	O8	S3	S2	S1	GC	NN8	NN7	M
仕様レベル	セレクタの形式	参照ページ	Fx3	Fx2	Fx1	IE8 RC1	IE7	IE6	O9	O8	S3	S2	S1	GC	NN8	NN7	M
CSS 2.1	*	91 ページ参照	○	○	○	○	○	○	○	○	○	○	-	○	○	○	-
CSS1	E	92 ページ参照	○	○	○	○	○	○	○	○	○	○	-	○	○	○	-
CSS1	.class	97 ページ参照	○	○	○	○	○	1/6	○	○	○	○	-	○	○	○	-
CSS1	#id	97 ページ参照	○	○	○	○	○	○	○	○	○	○	-	○	○	○	-
CSS1	E F	93 ページ参照	○	○	○	○	○	○	○	○	○	○	-	○	○	○	-
CSS 2.1	E > F	94 ページ参照	○	○	○	○	○	2/3	○	○	○	○	-	○	○	○	-
CSS 2.1	E + F	95 ページ参照	○	○	○	○	○	1/3	○	○	○	○	-	○	○	○	-
CSS 2.1	E[attribute]	96 ページ参照	○	○	○	2/7	2/7	4/7	○	○	○	○	-	○	○	○	-
CSS 2.1	E[attribute=value]	96 ページ参照	○	2/17	2/17	○	○	7/17	○	3/17	○	3/17	-	○	2/17	2/17	-
CSS 2.1	E[attribute~=value]	96 ページ参照	○	2/17	2/17	○	1/17	9/17	○	○	○	3/17	-	○	2/17	2/17	-
CSS 2.1	E[attribute|=value]	96 ページ参照	○	2/19	2/19	○	1/19	9/19	○	○	○	3/19	-	○	2/19	2/19	-
CSS 2.1	:first-child	98 ページ参照	○	1/7	1/7	○	1/7	5/7	○	1/7	○	1/7	-	○	1/7	1/7	-
CSS1	:link	99 ページ参照	○	○	○	○	○	○	○	○	○	○	-	○	○	○	-
CSS1	:visited	99 ページ参照	○	○	○	○	○	○	○	○	○	○	-	○	○	○	-
CSS 2.1	:lang()	100 ページ参照	○	○	○	○	5/11	5/11	○	1/11	○	5/11	-	○	○	○	-
CSS 2.1	:before	101 ページ参照	○	○	○	○	1/1	1/1	○	○	○	○	-	○	○	1/1	-
CSS3	::before	101 ページ参照	○	○	○	1/1	1/1	1/1	○	○	○	○	-	○	○	1/1	-
CSS 2.1	:after	101 ページ参照	○	○	○	○	1/1	1/1	○	○	○	○	-	○	○	1/1	-
CSS3	::after	101 ページ参照	○	○	○	1/1	1/1	1/1	○	○	○	○	-	○	○	1/1	-
CSS1	:first-letter	101 ページ参照	○	○	○	○	○	○	○	○	○	○	-	○	○	1/1	-
CSS3	::first-letter	101 ページ参照	○	○	○	1/1	1/1	○	○	○	○	○	-	○	○	1/1	-
CSS1	:first-line	100 ページ参照	○	○	○	○	○	○	○	○	○	○	-	○	○	1/1	-
CSS3	::first-line	100 ページ参照	○	○	○	1/1	1/1	○	○	○	○	○	-	○	○	1/1	-
CSS3	E[attribute^=value]	422 ページ参照	○	2/20	2/20	○	3/20	10/20	○	10/20	○	3/20	-	○	2/20	2/20	-
CSS3	E[attribute$=value]	422 ページ参照	○	2/20	2/20	○	3/20	10/20	○	10/20	○	3/20	-	○	2/20	2/20	-
CSS3	E[attribute*=value]	422 ページ参照	○	2/16	2/16	○	3/16	10/16	○	10/16	○	3/16	-	○	2/16	3/16	-
CSS3	E ~ F	425 ページ参照	○	○	○	○	○	2/3	○	2/3	○	2/3	-	○	○	2/3	-
CSS3	:root	422 ページ参照	○	○	○	1/1	1/1	1/1	○	1/1	○	○	-	○	○	○	-
CSS3	:last-child	423 ページ参照	○	1/7	1/7	5/7	5/7	5/7	○	5/7	○	2/7	-	○	1/7	1/7	-
CSS3	:only-child	424 ページ参照	○	1/5	1/5	3/5	3/5	3/5	○	3/5	○	2/5	-	○	3/5	3/5	-
CSS3	:nth-child()	422 ページ参照	47/88	47/88	47/88	47/88	47/88	47/88	○	47/88	○	47/88	-	○	47/88	47/88	-
CSS3	:nth-last-child()	423 ページ参照	47/88	47/88	47/88	47/88	47/88	47/88	○	47/88	○	47/88	-	○	47/88	47/88	-
CSS3	:first-of-type	423 ページ参照	7/10	7/10	7/10	7/10	7/10	7/10	○	7/10	○	7/10	-	○	7/10	7/10	-
CSS3	:last-of-type	423 ページ参照	7/10	7/10	7/10	7/10	7/10	7/10	○	7/10	○	7/10	-	○	7/10	7/10	-
CSS3	:only-of-type	424 ページ参照	3/5	3/5	3/5	3/5	3/5	3/5	○	3/5	○	3/5	-	○	3/5	3/5	-
CSS3	:nth-of-type()	423 ページ参照	47/88	47/88	47/88	47/88	47/88	47/88	○	47/88	○	47/88	-	○	47/88	47/88	-
CSS3	:nth-last-of-type()	423 ページ参照	47/88	47/88	47/88	47/88	47/88	47/88	○	47/88	○	47/88	-	○	47/88	47/88	-
CSS3	:empty	424 ページ参照	○	1/6	1/6	2/6	2/6	2/6	○	2/6	○	4/6	-	○	2/6	2/6	-
CSS3	:not()	425 ページ参照	○	○	○	2/4	2/4	2/4	○	2/4	○	○	-	○	○	○	-
CSS3	:target	424 ページ参照	○	○	○	1/3	1/3	1/3	○	1/3	○	○	-	○	○	○	-
CSS3	:enabled	424 ページ参照	○	○	○	1/2	1/2	1/2	○	1/2	○	1/2	-	○	1/2	1/2	-
CSS3	:disabled	424 ページ参照	○	○	○	1/2	1/2	1/2	○	1/2	○	1/2	-	○	1/2	1/2	-
CSS3	:checked	424 ページ参照	○	○	○	2/2	2/2	2/2	○	1/2	○	1/2	-	○	○	○	-
CSS1	a:hover	99 ページ参照	○	○	○	○	○	○	○	○	○	○	○	○	○	○	○
CSS 2.1	:hover	99 ページ参照	○	○	○	○	○	×	○	○	○	○	○	○	○	○	×
CSS1	a:active	99 ページ参照	○	○	○	○	○	○	○	○	○	○	○	○	○	○	○
CSS 2.1	:active	99 ページ参照	○	○	○	○	×	×	○	○	○	○	○	○	○	○	×
CSS 2.1	a:focus	99 ページ参照	○	○	○	○	×	×	○	○	○	○	×	○	○	○	○
CSS 2.1	:focus	99 ページ参照	○	○	○	○	×	×	○	○	○	○	○	○	○	○	○

• N/M ...... CSS Selectors test-suite のテストにて、全てはパスしなかったが M 項目中 N 個パス。なお、全項目にパスしていない場合でも、特定の条件のみパスしなかっただけといった場合（ buggy ）と、セレクタ自体をサポートしていない場合（ unsupported ）は区別して網掛けしています（薄い網掛けは buggy 、濃い網掛けは unsupported ）。※このページ上では、 buggy の背景色を #f56800 、 unsupported の背景色を #920f00 としています。
• - ...... CSS Selectors test-suite のテストが動作せず。
• Fx3: Firefox 3 ／ Fx2: Firefox 2 ／ Fx1: Firefox 1 ／ IE8 RC1: Internet Explorer 8 Release Candidate 1 ／ IE7: Internet Explorer 7 ／ IE6: Internet Explorer 6 ／ O9: Opera 9 ／ O8: Opera 8 ／ S3: Safari 3 ／ S2: Safari 2 ／ S1: Safari 1 ／ GC: Google Chrome ／ NN8: Netscape Browser 8 ／ NN7: Netscape Navigator 7 ／ M: Internet Explorer for Mac

なお、新旧対照表は次の通りです。

技術評論社版の実践 Web Standards Design P.428-P.431 新旧対照表

ページ	紙面上の記述	最新の記述	備考
P.428, P.430	IE8 Beta2	IE8 RC1
P.429, P.431	IE8 Beta2 ： Internet Explorer 8 Beta2	IE8 RC1 ： Internet Explorer 8 Release Candidate 1
P.430	IE8 Beta2 の列の a:acitve の行 △	IE8 RC1 の列の a:acitve の行 ○
P.430	IE8 Beta2 の列の :acitve の行 △	IE8 RC1 の列の :acitve の行 ○
P.431	MacIE の列の a:acitve の行 ×	MacIE の列の a:acitve の行 ○	これはブラウザのバージョンアップではなく、正誤表に含まれていた修正です。
P.430, P.431	::selection の行	削除	Selectors Level 3 の草案が 2009 年 3 月 10 日に更新され、 ::selection 擬似要素は削除されました。

表が大きいので、各セルに :hover しているときに、行グループ (row groups: いわゆる tr 要素 ) や列グループ (column groups: いわゆる colgroup 要素 ) の背景色を変えたら分かりやすいかなあと思って

table colgroup:hover,
table col:hover,
table tr:hover {
  background: #ffdb47 url(/files/styles/fade.gif) 0 0 repeat;
}

というスタイルを指定してみたのですが、 table tr:hover のセレクタしかスタイルが有効になりませんでした。 colgroup 要素や col 要素に :hover 指定をしても、その列のセルにスタイルが適用されるわけではないようです。 (jQuery を用いれば同様のことを実現できるとの情報もいただきましたが、個人的にはあまりスクリプトに頼りたくないなと思っています。 )

また、 CSS で tbody 要素を一定の高さにして、 overflow: auto でスクロール表示にする tips で取り上げていた手法を試しに適用してみました。 しかしブラウザによっては固定されませんし、仮に固定されたとしても colgroup に背景色を指定した状態で tbody 要素を固定すると、スクロール時に colgroup の背景色がテーブル外に表示されてしまったので、これについては取りやめるかもしれません。が、 colgroup の背景色が大幅にはみ出たので指定を取りやめています。