CSSの属性セレクタの有効性とまだ対応できていないIEに対してjQueryで補う。

ぶらぶらとWEB系のブログを徘徊してたら、目が覚めるような記事が。CSSの属性セレクタについての記事で、対応してないIEではjQueryでまかないましょう！という内容で、それぞれの属性セレクタの記述方法や、jQueryの場合の記述方法まで詳しく解説してあってなおかつ、デモンストレーションまで。すばらしいアウトプット力です。

JQueryの記述にはちょっと抵抗があった私ですが、CSS効果と比較してみてみると案外わかりやすいのだなと、ちょっと親近感が芽生えてきまいした。Design Spiceさんありがとう！

抜粋して掲載してますが、くわしくは本家Design Spiceさんのブログをどうぞ。

Design Spice：CSS3のセレクタとjQueryの書き方

要素名[属性名=”属性値”] 形式の属性セレクタ。

a[target="_blank"] { font-weight: bold; }

a要素の属性が”target”で属性値が”_blank”の場合にスタイルを適用するという記述です。
この属性セレクタはIE8でも認識できるようですが、念のためjQueryで代用する場合はこうなります。

jQueryで記述すると

$(function(){
	$("a[target='_blank']").css("font-weight","bold");
});

要素名[属性名^=”属性値”] 形式の属性セレクタ

a[href^="http://"]{color:red; }

aの属性の値が”http://”で始まる場合にスタイルを適用します。
“href^” の”^“がポイントです。正規表現ですよね。きっと。

jQueryで記述すると

$(function(){
	$("a[href^='http://']").css("color","red");
});

要素名[属性名$=”属性値”] 形式の属性セレクタ

a[href$="pdf"]{background:url(pdf.gif) no-repeat;}

a要素の属性が”href”でその末尾が”pdf”で終わる場合にスタイルを適用します。

jQueryで記述すると

$(function(){
	$("a[href$='pdf']").css({
		background:"url(pdf.gif)",
		backgroundRepeat:"no-repeat",
		padding:"3px 0 3px 20px"});
});

などなど、他にも沢山の便利な属性がありますが、詳しくはDesign Spice：CSS3のセレクタとjQueryの書き方を参照してください。
よく使うのが連続する要素の最後に適用する場合や、連続する要素の隔順に適用するとかも、属性セレクタやjQueryで実現できることがわかります。勉強になります・