CSSは属性セレクタが便利です。

Wordpressやらショッピングカート的サイトはHTMLを変えられなかったり、色々と面倒くさい。そういう時に大活躍するのがCSS属性セレクタ

HTMLの属性がセレクタになります。

<input type=text src=image.png />

の場合

input[type=text]
input[src=image.png]

と書けば選択できます。

便利ですよ。

td[valign=center]{

}

なども出来る。

画像ファイルはほぼピンポイントに拾うことが出来る

div img[src=http://www.st-hatena.com/users/ta/takuya_1st/profile.gif]{
 width:30px;
 height:30px;
}

画像には srcが必ずあるので、CSS側で選択できない画像は無い！

特定ホストの画像をガッツリ選択する

img[src^=http://f.hatena.ne.jp/]{
 width:30px;
 height:30px;
}

これで特定の外部サイト由来の画像をしっかり選択できる。

素材はPNG、写真はJPGと分けていると、要素選択は綺麗に行える。

JPEG画像をガッツリ選択する

img[src$=jpg]{
 width:30px;
 height:30px;
}

素材はPNG、写真はJPGと分けていると、要素選択は綺麗に行える。

連番の画像ファイル名をガッツリ選択する

img[src*=my_photo]{
 width:300px;
 height:300px;
}

これらの画像をまとめて選択できる。便利ね

<div><p><img src="img/my_photo001.jpg" /></p></div>

<div><p><img src="img/my_photo002.jpg" /></p></div>

<div><p><img src="img/my_photo003.jpg" /></p></div>

属性キーワードセレクタ

みなさん、属性キーワードをハイフンで指定しないんですかね。

div[class|=entry]{
 width:300px;
 height:300px;
}

<div class="entry-title"></div>
<div class="entry-desc"></div>
<div class="entry-body"></div>

ボタンやメニューで活躍するし、フォントの指定をまとめてやるときに便利。

2015-04-05追加

強欲マッチ系の属性セレクタについて記述を追加した

HTML要素で必ず付属するもの

要素で必ず付属があるもの、img a form input select textarea object は確実に特定できます。

属性なしで使うことが無いタグですからね。

なのでいちいちID入れなくてもいいんですね。便利です。

すっごく昔のシステムが吐き出すHTMLを整形するの面倒なので、CSSでやっつけましょう。
昔のシステムのHTMLをパースして書き換えるプログラムをいっぱい見かけたけど、結構無駄ですよそれ。