何故かあまり取り上げられない、jQueryのCSS3セレクタ
あれ？jQueryでCSS3の全部のセレクタを使えるようになってる？いつから？
jQueryといえば、ほとんどのCSS3のセレクタに対応しているのですが、そのうちの一部は、jQuery1.3.2になっても、確か使えなかったと認識していました。使えないものだと思っていたのですが、最近になって、そのまだ対応していなかったはずのセレクタを試してみたところ、なぜか使えるようになっている様子。1.3.2で試してみても動作する。
いつから！？
とりあえず検証。
いつから全部対応していたのだろう？
てっきりSizzleのバージョンがあがったからなんだろうなんて思っていたのですが、1.3系でも使えてるような・・・なぜ？と、記憶をたどってみると、以前のFirefoxなどでは使えなかっただけか？なんて考えたので、いろんなブラウザで表示チェックしてみた。
その結果、まだ紹介にもでてこない理由としては、全てのブラウザで対応していないからという結論に至った。
今回チェックしたCSS3のセレクタ
jQueryではほとんどのCSSセレクタに対応しているのですが、下記のセレクタは、今までは対応していませんでした。
今回確認したのは以下の疑似要素。
- :root
- :target
- :target
- :nth-last-child()
- :nth-of-type()
- :nth-last-of-type()
- :first-of-type
- :last-of-type
- :only-of-type
- :lang()
■ちょっとしたデモ
上記のセレクタがjQueryで使える場合は、テスト○という文字の右にそれぞれのセレクタ名がでます。(:rootなど一部省略)
- テスト１
- テスト２
- テスト３
- テスト４
- テスト５
- テスト６
- テスト７
- テスト８
- テスト９
- テスト10
最近のブラウザのみ対応
今回チェックした一覧をブラウザでチェックすると、Firefox3.5以上、Opera最新版、Chromeでは対応しているようでした。しかし、IEは全滅。1.3系だとエラーではないものの意図した位置に表示されず。1.4系だとエラーで表示すらされない現状でした。
まだまだ使う機会や活用方法などが広まっていないので、不便はないですが、これらがうまく活用できるようになったら、もっと便利になるのだろうなーと思います。
そもそもIEが・・・なんてことは言いませんが、ブラウザの差異がなくなれば本当にいいんですけどね。
