javascript - クラス名 x の最後の div を検出し、それに新しいクラス y を追加します

Question

最後のdivを決定して新しいクラスを追加する最良の方法を見つけたいと思います。それはjavascriptまたはcss3ですか？

これが私の例です。私がこれを持っているとしましょう：

<div class="items">
   <div class="raw">item 1</div>
   <div class="raw">item 2</div>
   <div class="raw">item 3</div>
   <div class="raw">item 4</div>
   <div class="raw">item 5</div>
   <div class="raw">item 6</div>
</div>

どのように？どのような方法ですか？クラス名「raw」の最後のdivに新しいクラス名「new」を追加できますか?

次のようになります。

<div class="raw new">item 6</div>

Answer 1

純粋なCSSで行くことができます：

div.raw:last-child {
    /* styles for the last element here */
}

または、子セット内でより具体的にする必要がある場合

div.raw:last-of-type {
    /* styles for the last element here */
}

念のため、新しいクラス( -name ) は必須ではありません。

どちらの疑似セレクターも、最新の W3C ブラウザーと互換性があります。9 から始まる IE。IE7+ を早急にサポートしたい場合は、この小さなライブラリをお勧めします: https://code.google.com/p/ie7-js/

Answer 2

ただ：

$('div.raw:last').addClass('new');

Answer 3

jQuery では次のように単純です。

$(".items > .raw:last").addClass("new");

純粋な JavaScript の場合querySelector:

document.querySelector(".items > .raw:last-child").className += " new";

Answer 4

$('div.raw:last').addClass('new');