Style last children of last child

I have the following 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>

I have dynamically generated HTML, how do I style the above two things? Apply style to the section with id="top", and style the last 2 list-items in the last ul.


solution

Something like this?

top > ul:last-of-type li:nth-last-child(-n+2) {

background:aqua; }

jsFiddle here

Use a combination of selectors - :last-of-type and :nth-last-child.

Note - this is not fully supported by IE8 and down.