【CSS】特定の要素にのみ適用させたい

Question

<section>
          <div class="box">
            <h3>title</h3>
            <div class="text">
              <p>texttexttexttexttexttexttext</p>
            </div>
            <img src="images/test.png" alt="">
          </div>

          <div class="box">
            <h3>title</h3>
            <div class="text">
              <p>texttexttexttexttexttexttext</p>
            </div>
            <img src="images/test.png" alt="">
          </div>

          <div class="box">
            <h3>title</h3>
            <div class="text">
              <p>texttexttexttexttexttexttext</p>
            </div>
            <img src="images/test.png" alt="">
          </div>

          <div class="box">
            <h3>title</h3>
            <div class="text">
              <p>texttexttexttexttexttexttext</p>
            </div>
            <img src="images/test.png" alt="">
          </div>


        </section>

上記のようなhtmlがあった場合に一番最後のboxのimgだけにcssを適用させたいのですが
できればclassを追加しないでできないでしょうか？

.box img:nth-of-type(1) / .box img:nth-child(1)

などにすると当たり前ですが各要素のimgにcssが適用されてしまいます。
解決策はありますでしょうか？
ご教示よろしくお願いいたします。

Answer 1

ちょうど、:last-childのようなセレクタがあります（MDN）。IEですら9以上で対応済なので、実用面でもほぼ問題ありません。

Comments

[MeB]

ありがとうございます。
しかし、これだと全てのbox内のimgに効いてしまって・・・

Answer 2

.box:last-of-type img {}

【E:last-of-type－CSS3リファレンス】
http://www.htmq.com/selector/last-of-type.shtml

【:last-of-type - CSS | MDN】
https://developer.mozilla.org/ja/docs/Web/CSS/:last-of-type

Comments

[MeB]

擬似クラスの後に imgなど記述できるのですね…
しりませんでした。高評価が高かったためベストアンサーにさせていただきます。
ありがとうございました。

Answer 3

古いブラウザだときかないかもしれませんが、下記でいかがでしょうか。

section > .box:last-child > img {
  /* 効かせたいCSS */
}

Comments

[MeB]

ありがとうございます！
こんな書き方が…