CSS3で定義されたパターンE[foo*="bar"]の属性セレクタは、指定した属性の属性値が部分一致した場合、指定した要素にスタイルが適用されます。

対応ブラウザ

• 
• 
• 
• 
• 
• 
• 

属性セレクタのサンプル

li img[src*="/bnr/"] {
  padding: 1px;
  border: 1px solid #999;
}

<ul>
<li><img src="/img/share/logo.gif" alt="CSS HappyLifeZERO" /></li>
<li><img src="/img/bnr/css-happylife.gif" alt="CSS HappyLife" /></li>
<li><img src="/img/bnr/happyline.gif" alt="happyLine" /></li>
<li><img src="/img/bnr/digiper.gif" alt="digiper" /></li>
</ul>

部分一致させることで、bnrディレクトリに入っている画像だけスタイルが適用されるようにしています。

このサンプルを今見ているブラウザで表示すると以下のようになります。

サンプルのブラウザ上の表示

• 
• 
• 
• 

Movable Typeなどで特定のディレクトリに画像がアップロードされるようにしていれば、ブログ記事内の画像だけボーダーを付けるなどといった事も可能です。