THE HAM MEDIA BLOG

何故かあまり取り上げられない、jQueryのCSS3セレクタ

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery
タグ:
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など一部省略)

  • テスト1
  • テスト2
  • テスト3
  • テスト4
  • テスト5
  • テスト6
  • テスト7
  • テスト8
  • テスト9
  • テスト10

最近のブラウザのみ対応

今回チェックした一覧をブラウザでチェックすると、Firefox3.5以上、Opera最新版、Chromeでは対応しているようでした。しかし、IEは全滅。1.3系だとエラーではないものの意図した位置に表示されず。1.4系だとエラーで表示すらされない現状でした。

まだまだ使う機会や活用方法などが広まっていないので、不便はないですが、これらがうまく活用できるようになったら、もっと便利になるのだろうなーと思います。

そもそもIEが・・・なんてことは言いませんが、ブラウザの差異がなくなれば本当にいいんですけどね。



この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス: [必須入力]

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック

トップに戻る

×

この広告は180日以上新しい記事の投稿がないブログに表示されております。