Выберите последние элементы с помощью селекторов CSS

Question

Есть ли способ таргетинга на последние элементы X в группе, используя ТОЛЬКО CSS (предполагая, что мы не знаем, сколько элементов есть)?

Пример - цель 3 последних элементов в ul:

<ul> 
    <li>Element 1</li> 
    <li>Element 2</li> 
    <li>Element 3</li> 
    ... 
    <li>Element X-2</li> 
    <li>Element X-1</li> 
    <li>Element X</li> 
</ul> 

Answer 1

Используйте :nth-last-child(N) selector:

li:nth-last-child(-n+3) { 
    /* ... */ 
} 

See this demo.

Answer 2

Это будет применяться стиль в течение последних 3-х элементов. Demo

li:nth-last-child(-n+3) 
{ 
    .... 
} 

Поддержка

 
Feature  Chrome Firefox (Gecko) IE Opera Safari 
Basic support 4.0  3.5  (1.9.1) 9.0 9.5 3.2