記事本文
CSS Selectors test-suite およびダイナミック擬似クラスセレクタをチェックしてみた
CSS Selectors testsuite や、「 CSS の互換性と Internet Explorer 」などから自分用のまとめ表を作りたいで、
......まあ、 CSS Selectors test-suite - CSS3 . info はセレクタだけのチェッカですし、 CSS の互換性と Internet Explorer と組み合わせてよいまとめが作れたらいいかなと思います
と書いていましたが、とりあえず CSS Selectors test-suite にて、 CSS 2.1 のセレクタおよび CSS3 のセレクタについてまとめることにしました。
CSS Selectors test-suite だと :hover 擬似クラスや :active 擬似クラスや :focus 擬似クラスといったダイナミック擬似クラスまではテストできないので、昨日作って没にしかけた「 CSS の互換性と Internet Explorer 」およびその他のブラウザでのテストページでテストしました。 作っておいてよかったなあ......。
とりあえず、私の Windows 環境でテストできるブラウザについて表を作成してみました。
当時私がテストしたブラウザも念のため再確認してみたら、テスト内容が若干変更になったのか、異なる結果が返ってきました。
IE 7 正式版を含む各種ブラウザの CSS Selectors testsuite の検証結果のまとめではトラックバックにて Blog.okuryu : Safari の CSS セレクタ対応状況をお知らせいただいていたのですが、どなたか改めて Safari 1 、 Safari 2 、 MacIE 5 でテストしていただけると嬉しいです。
Lucky bag::blog の e-luck さんに検証していただいたので、 Safari 2 と Safari 1 と MacIE 5 の検証結果を追記しました。 しかし、 Safari 1 と MacIE 5 では CSS Selectors test-suite が動作しなかったとのこと。
CSS Selectors test-suite による各ブラウザの検証結果 2008 年版
- * から :checked までの行
- ○...... CSS Selectors test-suite の該当項目を全てクリア
- m/n ...... CSS Selectors test-suite の該当項目にて、 (m out of n failed) となった
- a:hover から :focus までの行
- ○...... 「 CSS の互換性と Internet Explorer 」およびその他のブラウザでのテストページで想定した表示を行った
- ×...... 「 CSS の互換性と Internet Explorer 」およびその他のブラウザでのテストページで想定した表示を行えなかった
| 仕様レベル | セレクタの形式 | セレクタ名 | Firefox 3 | Firefox 2 | Firefox 1 | IE 8 Beta2 | IE 7 | IE 6 | Opera 9 | Opera 8 | Safari 3 | Safari 2 | Safari 1 | Google Chrome | NN 8 | NN 7 | MacIE 5 |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 仕様レベル | セレクタの形式 | セレクタ名 | Firefox 3 | Firefox 2 | Firefox 1 | IE 8 Beta2 | IE 7 | IE 6 | Opera 9 | Opera 8 | Safari 3 | Safari 2 | Safari 1 | Google Chrome | NN 8 | NN 7 | MacIE 5 |
| CSS 2.1 | * | ユニバーサルセレクタ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | 検証不可 | ○ | ○ | ○ | 検証不可 |
| CSS1 | E | 要素型セレクタ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | 検証不可 | ○ | ○ | ○ | 検証不可 |
| CSS1 | .class | クラスセレクタ | ○ | ○ | ○ | ○ | ○ | 1/6 | ○ | ○ | ○ | ○ | 検証不可 | ○ | ○ | ○ | 検証不可 |
| CSS1 | #id | ID セレクタ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | 検証不可 | ○ | ○ | ○ | 検証不可 |
| CSS1 | E F | 子孫セレクタ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | 検証不可 | ○ | ○ | ○ | 検証不可 |
| CSS 2.1 | E > F | 子供セレクタ | ○ | ○ | ○ | ○ | ○ | 2/3 | ○ | ○ | ○ | ○ | 検証不可 | ○ | ○ | ○ | 検証不可 |
| CSS 2.1 | E + F | 隣接兄弟セレクタ | ○ | ○ | ○ | ○ | ○ | 1/3 | ○ | ○ | ○ | ○ | 検証不可 | ○ | ○ | ○ | 検証不可 |
| CSS 2.1 | E[attribute] | 属性セレクタ（属性値に関わらず、その属性が指定されている） | ○ | ○ | ○ | 2/7 | 2/7 | 4/7 | ○ | ○ | ○ | ○ | 検証不可 | ○ | ○ | ○ | 検証不可 |
| CSS 2.1 | E[attribute=value] | 属性セレクタ（属性値がvalueに完全に一致する） | ○ | 2/17 | 2/17 | ○ | ○ | 7/17 | ○ | 3/17 | ○ | 3/17 | 検証不可 | ○ | 2/17 | 2/17 | 検証不可 |
| CSS 2.1 | E[attribute~=value] | 属性セレクタ（属性値がスペースで区切られたリストで、そのうちのひとつの属性値がvalueに完全に一致する） | ○ | 2/17 | 2/17 | ○ | 1/17 | 9/17 | ○ | ○ | ○ | 3/17 | 検証不可 | ○ | 2/17 | 2/17 | 検証不可 |
| CSS 2.1 | E[attribute|=value] | 属性セレクタ（属性値がハイフンで区切られたリストで、value-で始まる値である） | ○ | 2/19 | 2/19 | ○ | 1/19 | 9/19 | ○ | ○ | ○ | 3/19 | 検証不可 | ○ | 2/19 | 2/19 | 検証不可 |
| CSS 2.1 | :first-child | :first-child擬似クラス | ○ | 1/7 | 1/7 | ○ | 1/7 | 5/7 | ○ | 1/7 | ○ | 1/7 | 検証不可 | ○ | 1/7 | 1/7 | 検証不可 |
| CSS1 | :link | :link擬似クラス | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | 検証不可 | ○ | ○ | ○ | 検証不可 |
| CSS1 | :visited | :visited擬似クラス | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | 検証不可 | ○ | ○ | ○ | 検証不可 |
| CSS 2.1 | :lang() | :lang()擬似クラス | ○ | ○ | ○ | ○ | 5/11 | 5/11 | ○ | 1/11 | ○ | 5/11 | 検証不可 | ○ | ○ | ○ | 検証不可 |
| CSS 2.1 | :before | :before擬似要素 | ○ | ○ | ○ | ○ | 1/1 | 1/1 | ○ | ○ | ○ | ○ | 検証不可 | ○ | ○ | 1/1 | 検証不可 |
| CSS3 | ::before | ::before擬似要素 | ○ | ○ | ○ | 1/1 | 1/1 | 1/1 | ○ | ○ | ○ | ○ | 検証不可 | ○ | ○ | 1/1 | 検証不可 |
| CSS 2.1 | :after | :after擬似要素 | ○ | ○ | ○ | ○ | 1/1 | 1/1 | ○ | ○ | ○ | ○ | 検証不可 | ○ | ○ | 1/1 | 検証不可 |
| CSS3 | ::after | ::after擬似要素 | ○ | ○ | ○ | 1/1 | 1/1 | 1/1 | ○ | ○ | ○ | ○ | 検証不可 | ○ | ○ | 1/1 | 検証不可 |
| CSS1 | :first-letter | :first-letter擬似要素 | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | 検証不可 | ○ | ○ | 1/1 | 検証不可 |
| CSS3 | ::first-letter | ::first-letter擬似要素 | ○ | ○ | ○ | 1/1 | 1/1 | ○ | ○ | ○ | ○ | ○ | 検証不可 | ○ | ○ | 1/1 | 検証不可 |
| CSS1 | :first-line | :first-line擬似要素 | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | 検証不可 | ○ | ○ | 1/1 | 検証不可 |
| CSS3 | ::first-line | ::first-line擬似要素 | ○ | ○ | ○ | 1/1 | 1/1 | ○ | ○ | ○ | ○ | ○ | 検証不可 | ○ | ○ | 1/1 | 検証不可 |
| CSS3 | E[attribute^=value] | 属性セレクタ（属性値がvalueで始まる値である） | ○ | 2/20 | 2/20 | ○ | 3/20 | 10/20 | ○ | 10/20 | ○ | 3/20 | 検証不可 | ○ | 2/20 | 2/20 | 検証不可 |
| CSS3 | E[attribute$=value] | 属性セレクタ（属性値がvalueで終わる値である） | ○ | 2/20 | 2/20 | ○ | 3/20 | 10/20 | ○ | 10/20 | ○ | 3/20 | 検証不可 | ○ | 2/20 | 2/20 | 検証不可 |
| CSS3 | E[attribute*=value] | 属性セレクタ（属性値がvalueを含む値である） | ○ | 2/16 | 2/16 | ○ | 3/16 | 10/16 | ○ | 10/16 | ○ | 3/16 | 検証不可 | ○ | 2/16 | 3/16 | 検証不可 |
| CSS3 | E ~ F | 兄弟セレクタ | ○ | ○ | ○ | ○ | ○ | 2/3 | ○ | 2/3 | ○ | 2/3 | 検証不可 | ○ | ○ | 2/3 | 検証不可 |
| CSS3 | :root | :root 擬似クラス | ○ | ○ | ○ | 1/1 | 1/1 | 1/1 | ○ | 1/1 | ○ | ○ | 検証不可 | ○ | ○ | ○ | 検証不可 |
| CSS3 | :last-child | :last-child 擬似クラス | ○ | 1/7 | 1/7 | 5/7 | 5/7 | 5/7 | ○ | 5/7 | ○ | 2/7 | 検証不可 | ○ | 1/7 | 1/7 | 検証不可 |
| CSS3 | :only-child | :only-child 擬似クラス | ○ | 1/5 | 1/5 | 3/5 | 3/5 | 3/5 | ○ | 3/5 | ○ | 2/5 | 検証不可 | ○ | 3/5 | 3/5 | 検証不可 |
| CSS3 | :nth-child() | :nth-child() 擬似クラス | 47/88 | 47/88 | 47/88 | 47/88 | 47/88 | 47/88 | ○ | 47/88 | ○ | 47/88 | 検証不可 | ○ | 47/88 | 47/88 | 検証不可 |
| CSS3 | :nth-last-child() | :nth-last-child() 擬似クラス | 47/88 | 47/88 | 47/88 | 47/88 | 47/88 | 47/88 | ○ | 47/88 | ○ | 47/88 | 検証不可 | ○ | 47/88 | 47/88 | 検証不可 |
| CSS3 | :first-of-type | :first-of-type 擬似クラス | 7/10 | 7/10 | 7/10 | 7/10 | 7/10 | 7/10 | ○ | 7/10 | ○ | 7/10 | 検証不可 | ○ | 7/10 | 7/10 | 検証不可 |
| CSS3 | :last-of-type | :last-of-type 擬似クラス | 7/10 | 7/10 | 7/10 | 7/10 | 7/10 | 7/10 | ○ | 7/10 | ○ | 7/10 | 検証不可 | ○ | 7/10 | 7/10 | 検証不可 |
| CSS3 | :only-of-type | :only-of-type 擬似クラス | 3/5 | 3/5 | 3/5 | 3/5 | 3/5 | 3/5 | ○ | 3/5 | ○ | 3/5 | 検証不可 | ○ | 3/5 | 3/5 | 検証不可 |
| CSS3 | :nth-of-type() | :nth-of-type() 擬似クラス | 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() | :nth-last-of-type() 擬似クラス | 47/88 | 47/88 | 47/88 | 47/88 | 47/88 | 47/88 | ○ | 47/88 | ○ | 47/88 | 検証不可 | ○ | 47/88 | 47/88 | 検証不可 |
| CSS3 | :empty | :empty 擬似クラス | ○ | 1/6 | 1/6 | 2/6 | 2/6 | 2/6 | ○ | 2/6 | ○ | 4/6 | 検証不可 | ○ | 2/6 | 2/6 | 検証不可 |
| CSS3 | :not() | :not() 擬似クラス | ○ | ○ | ○ | 2/4 | 2/4 | 2/4 | ○ | 2/4 | ○ | ○ | 検証不可 | ○ | ○ | ○ | 検証不可 |
| CSS3 | :target | :target 擬似クラス | ○ | ○ | ○ | 1/3 | 1/3 | 1/3 | ○ | 1/3 | ○ | ○ | 検証不可 | ○ | ○ | ○ | 検証不可 |
| CSS3 | :enabled | :enabled 擬似クラス | ○ | ○ | ○ | 1/2 | 1/2 | 1/2 | ○ | 1/2 | ○ | 1/2 | 検証不可 | ○ | 1/2 | 1/2 | 検証不可 |
| CSS3 | :disabled | :disabled 擬似クラス | ○ | ○ | ○ | 1/2 | 1/2 | 1/2 | ○ | 1/2 | ○ | 1/2 | 検証不可 | ○ | 1/2 | 1/2 | 検証不可 |
| CSS3 | :checked | :checked 擬似クラス | ○ | ○ | ○ | 2/2 | 2/2 | 2/2 | ○ | 1/2 | ○ | 1/2 | 検証不可 | ○ | ○ | ○ | 検証不可 |
| CSS1 | a:hover | a:hover 擬似クラス | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ |
| CSS 2.1 | :hover | :hover 擬似クラス | ○ | ○ | ○ | ○ | ○ | × | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | × |
| CSS1 | a:active | a:active 擬似クラス | ○ | ○ | ○ | × | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ |
| CSS 2.1 | :active | :active 擬似クラス | ○ | ○ | ○ | × | × | × | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | × |
| CSS 2.1 | a:focus | a:focus 擬似クラス | ○ | ○ | ○ | ○ | × | × | ○ | ○ | ○ | ○ | × | ○ | ○ | ○ | ○ |
| CSS 2.1 | :focus | :focus 擬似クラス | ○ | ○ | ○ | ○ | × | × | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ |
| CSS 3 | ::selection | ::selection 擬似要素 | × | × | × | × | × | × | ○ | × | ○ | ○ | ○ | ○ | × | × | × |
CSS3 のセレクタの実装もだいぶ進んでいる
Opera 9.61、 Safari 3.1.2、 Google Chrome 0.2.149.30 は全ての項目をクリアしていますね。 Firefox 3.0.3 と Internet Explorer 8 Beta2 も全てではありませんが実装が進んでいますので、これらのモダンブラウザの普及が進めば CSS3 のセレクタも実用性が増していくのではないでしょうか。
ただし、 Internet Explorer 8 Beta2 は「擬似要素を :: ( コロン 2 つ ) で、擬似クラスを : ( コロン 1 つ ) で区別する」という記述に対応していないため、 ::before 擬似要素、 ::after 擬似要素、 ::first-letter 擬似要素、 ::first-line 擬似要素を使う場合は留意する必要があるでしょう。
なお、擬似要素の :: による記法については 擬似要素を記述する際の Tips や Lucky bag::blog: 疑似要素の表記法を参照してください。 ......この段落、実は 2 年前の記事と同じ〆だったり。
