特定の画像にだけCSSを適用したい

cssを調整している時に、特定の画像にだけcssでサイズ等を調整したい、という状況が…!
しかも、目当てのimgタグには、個別にcssを当てれるようなIDやclassは振られていない…
しかも同じdiv要素の中に対象のimgは複数あるので:first-childなどの擬似セレクタも使えない…
対象外のimgもいっぱいあり、当然ながらそれらに個別のid、class
(対象のimgは不規則に並んでるので尚更つかえない…)

一応、対象となるそれらは、全て同じ画像ファイル。
ああ、せめて特定の画像にcssを当てることが出来たらな…

…調べてみたら、ありました。

【CSS】

img[src$="〇〇(任意のファイル名)"]

これだけです。これだけ!

大事なことなので、2度言いましたよ!。

「src$=”〇〇(任意のファイル名)”」
この記述で、srcに入力されているソースの末尾が”〇〇(任意のファイル名)”になっているファイルを指定することができるようです。

“〇〇/〇〇.jpg”といった形で、階層も含めることができます。

上記の書き方をする場合、ファイル名単体だけで指定してしまうと、別の場所にある同名ファイルにも影響してしまいますので、きちんと指定してあげましょう。
もちろん、特定id内のimg…といった形で指定しても問題ないです。
(その方が安全でしょう)

【サンプル】

左の画像にだけ、枠線を入れてみました。

カテゴリーCSS