jQueryで最後の要素だけ文字の色を変えたい

質問

jQueryで<div>の中で<p>タグの最後の、<p>う</p>、<p>お</p>、<p>す</p>の文字の色を変えたいのですが全然できません。

<div class="test">
<p>あ</p>
<p>い</p>
<p>う</p>←ココ
<div class="test">
<p>え</p>
<p>お</p>←ココ
</div></div>
<divl class="test">
<p>さ</p>
<p>し</p>
<p>す</p>←ココ
</div>

色々と試しましたが、うまくいきませんでした。
$(".test>p:last-child").css("color","yellow");
では、<p>お</p>、<p>す</p>しか変わりません。

$(".test>p:last-of-type").css("color","yellow");
で希望どうり動作しましたが、IE8などでは動きませんでした。firefox,chromeでは動作しました。
IE8でも動作する方法はありませんか？よろしくお願いします。

回答No.2

babu_baboo · ベストアンサー

あ～ごめん。かいとうしてから、むいみだとさとった。
jQuery って、つかったことないのよ。
で、

$("div.test > p").filter (function () { return !$(this).nextAll("p").length }).css("color", "yellow");

どうだろう？
もっとスマートなやつあるだろうけれど。

お礼

希望どうり動作しました。

ありがとうございます。

回答No.1

babu_baboo

<style type="text/css">
div.test > p:last-of-type {
color: yellow;
}
</style>

お礼

ご回答ありがとうございます。

スタイルシートではなくjqueryで変えたいのです。
":last-of-type"はie8は動かないのでは?