javascript - 最後の子のスタイルの最後の子

Question

私は次のHTMLを持っています:

<section></section>

<section id="top">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>   <!-- STYLE THIS -->
        <li>5</li>   <!-- STYLE THIS -->
    </ul>
</section>

<section></section>

HTML を動的に生成しましたが、上記の 2 つのスタイルを設定するにはどうすればよいですか? sectionwithにスタイルを適用し、id="top"最後の 2 つのスタイルを last に適用します。list-itemsul

Answer 1

このようなもの？

#top > ul:last-of-type li:nth-last-child(-n+2) {
    background:aqua;
}

ここでjsFiddle

セレクター -:last-of-typeと を組み合わせて使用​​し:nth-last-childます。

注 - これはIE8 以下では完全にはサポートされていません。

Answer 2

どうですか：

#top > ul:nth-child(3) > li:nth-child(4),
#top > ul:nth-child(3) > li:nth-child(5) {}

ワーキングデモ

Answer 3

#top {
    color:red;
}

#top ul:last-of-type li:last-of-type {
    color:green;
}