jQueryでCSS3を先取り！
2007年2月28日
先日のエントリでちょこっとだけ言及した「内包テキストマッチング属性セレクタ」って何？という質問を頂いたのですが、実はこの呼び名、まだあまり浸透していないのでしょうかね？私も最初は呼び名を知らなくて、益子さんの著書「Web標準の教科書」を見て初めて知りました
この「内包テキストマッチング属性セレクタ」は一部先行実装しているブラウザもあるのですが、IE6が対応していないのでなかなか使いどころが難しいですね。(IE7は一応対応しているようです：こちら参照)
でもjQueryを使えばそんな心配は無用！クロスブラウザ対応で簡単にできちゃうんです。
ここで言う「内包テキストマッチング属性セレクタ」とは下記のものを指します。これらはCSS3で新たに定義される(予定)のものです。
- E[foo^=”bar”]
- E[foo$=”bar”]
- E[foo*=”bar”]
E[foo^=”bar”]はE要素の中にfooという属性名を持ち、その属性値が前方一致でが含まれている要素を指定します。例えばa[href^=”http://”]と書けば、hrefの属性値の最初にhttp://と書かれているもののみにスタイルを適用できます。これを使えば外部リンクにだけアイコンをつけるといった作業も簡単にできますね。
E[foo$=”bar”]はE要素の中にfooという属性名を持ち、その属性値が後方一致で含まれている要素を指定します。例えばa[href$=”.pdf”]と書けば「pdfファイルへのリンクのみスタイルを適用する」なんてこともできます。
E[foo*=”bar”]はE要素の中にfooという属性名を持ち、その属性値barが少なくとも一つ含まれている要素を指定します。
jQueryで使う際のポイント
上記のように、この属性セレクタが使えるようになればとても便利になるでしょう。しかし・・・現状はIE6が対応してません（泣
そんな時使えるのがjQueryです。ただしjQueryの場合ちょっとだけ指定方法が異なります。jQueryで使う場合は下記のように書きます。
- E[@foo^=”bar”]
- E[@foo$=”bar”]
- E[@foo*=”bar”]
お分かりでしょうか、そう「@」が付くんですね。これだけ注意していればjQueryを使って内包テキストマッチング属性セレクタを操ることができます。例えば先ほどの例、pdfファイルへのリンクのみ文字の色を変えたい場合は下記のように書きます。
$(document).ready(function(){
$('a[@href$=".pdf"]').css('color','#996666')
})
参考リンク
現在、この記事へのトラックバックは受け付けていません。
- Links
