Стиль последних детей последнего ребенка

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, как я стиль вышеупомянутые две вещи? Примените стиль к section с id="top" и введите последние 2 list-items в последних ul.

Answer 1

Что-то вроде этого?

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

jsFiddle here

Используйте комбинацию селекторов - :last-of-type и :nth-last-child.

Примечание - это not fully supported от IE8 и ниже.

Answer 2

насчет:

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

Working demo

Answer 3

#top { 
    color:red; 
} 

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