血統の森: Home > web実験小屋 > CSS3ウェブブラウザ実装メモ > selector Level 3とLevel 4の展望

xreaの広告です。

hosting by xrea.com

selector Level 3とLevel 4の展望

作成:2009-02-08
更新:2011-10-19

目次

selector Level 3

実装状況

端的に言ってしまえば、IE8まではバグがあり、IE9以降は対応している。Firefox、Opera、Safari等のいわゆるモダンブラウザは、結構前から対応している。実装状況の表はfindmebyip.comのCSS3 Selectorsを参照すればいいだろう。手元のブラウザの対応がどうなっているのかはCSS Selectors test-suite - CSS3.infoで調べることができる。

使い方とか

CSS セレクタに関するおさらい | WWW WATCHがやや古いがわかりやすいか。はてなブックマークでは、 CSS セレクタ総復習 (2010年5月版)保存版!CSS3セレクタの説明書|Webparkが多数のブックマークを集めているようだ。セレクタ Level 3(仕様書の日本語訳)も存在する。

selector Level 4の展望

Selectors Level 4 [CSS Working Group Wiki]にブレインストーミングが、 CSS4セレクタ (Selectors Level 4) の新機能として、日本語での解説がある。

:matches()

:matches()の先行独自実装といえる-moz-any()に関する記事がFirefox 4: -moz-any() selector grouping ✩ Mozilla Hacks – the Web developer blogにある。リンク先記事のコメントによれば、-webkit-any()-o-any()としても動作するらしい。

なんとなくHTMLを書くのが嫌なので、リンク先参照ということで。

:linkまたは:visitedにマッチする擬似クラス、:any-linkはFirefoxとWebkitで実装されている。

テストは右のリンクの通り→anylinkのテスト

a.anylink:-moz-any-link{color:red;}
a.anylink:-webkit-any-link{color:red;}
...
<a class="anylink" href="#">anylinkのテスト</a>

:indeterminate

:indeterminateを参照。

検証に使用したブラウザ

Firefox
rv:7.0.1 Gecko/20100101 Firefox/7.0.1(リリース版)
Opera
Presto/2.9.168 Version/11.51(リリース版)
Webkit(Google Chrome)
AppleWebKit/535.1 Chrome/14.0.835.202 Safari/535.1(リリース版)

仕様書とリファレンス

Selectors Level 3 (2011-09-29 REC)
http://www.w3.org/TR/2011/REC-css3-selectors-20110929/
セレクタ Level 3 2011年9月29日付 W3C 勧告
http://standards.mitsue.co.jp/resources/w3c/TR/css3-selectors/
Selectors Level 4 (2011-09-29 WD)
http://www.w3.org/TR/2011/WD-selectors4-20110929/
CSS Selectors support in Opera Presto 2.9
http://www.opera.com/docs/specs/presto29/css/selectors/
フォームのインタフェースデザイン(4)--チェックボックスとラジオボタンのデザイン
http://builder.japan.zdnet.com/html-css/sp_css-firefox-safari/20375649/