HTMLで2つの画像を別々のプロパティで表示させたい

Question

WordPressでページを作成しているのですが、
2つの画像を設定する場合に別々のプロパティで設定したいのです。

やりたいことは、SP版のみ、max-width="150%"で設定したいです。
今だと大元のimgにかかっているCSSでmax-width="100%"が設定されてしまい、両方とも100%で表示されてしまいます。

<img class="pc" src="hogehoge1" alt="" width="1110" height="2181" class="alignnone size-full wp-image-1028" />

<img class="sp" src="hogehoge1" alt="" width="1110" height="2181" class="alignnone size-full wp-image-1028" />

PC、SPについてはレスポンシブでスマホサイズで表示非表示を制御しているだけです。

色々調べているのですが、

img[src="http://tokuteinogazou.png"] {
  border: 1px solid black;
}

このようにURLを入れて直接制御を考えたのですが、WordPressのテーマ→追加CSSで設定ができず、他の方法があれば教えて頂けませんでしょうか？
よろしくお願いいたします。

Answer 1

一つの要素には一つclass=""しか設定できません。

<img class="sp" src="hogehoge1" alt="" width="1110" height="2181" class="alignnone size-full wp-image-1028" />

提供したコードを見ると、class="sp"とclass="alignnone size-full wp-image-1028"二カ所classがあります。
なのでspを後ろのclassの中におけば治ります。

class="sp alignnone size-full wp-image-1028"

ちなみに、spだけにcssをかけたいのなら、.spでできます。srcじゃなくてもいいです。

.sp{
  ...
  border: 1px solid black;
  ...
}