css - CSS::リストアイテムの最後の子

Question

ulに複数のクラスを持つliアイテムがある場合、：last-childを使用して特定のクラスの最後のアイテムを取得することは可能ですか？

たとえば、次のことを検討してください。

<ul class="test">
    <li class="one">
    <li class="one">
    <li class="one">
    <li class="two">
    <li class="two">
</ul>

クラス「one」（つまり、リストの3番目）を持つ最後のliにスタイルを追加したいと思います。

フォローしてみましたが、うまくいきません。

ul.test li.one:last-child 

Answer 1

それはまだできません。

• :last-childタグ名などに関係なく、最後の子を選択します。
• 考えられる代替方法は、 tag:last-of-typeの最後のオカレンスを選択することです。クラス名などは無視します。

唯一のオプションは、その要素に特定のクラス名を追加するか、JavaScript を使用してこのクラス名を追加することです。

Answer 2

li ごとにクラスを指定する代わりに、li 番号でスタイルを割り当てることができる n 番目の子を使用できます。

3番目のliに別のcssを提供したい場合は、次のように書く必要があります

li:nth-child(3) {
    color: green;   
}

Answer 3

jquery を使用して実行できます: http://jsfiddle.net/surendraVsingh/HyAhL/2/

Jクエリコード:

var n = $('.one').length;
$('.one').eq(n-1).css('color', 'red');