Как выбрать последний элемент на странице?

Question

Есть ли способ выбрать последний элемент определенного элемента с помощью css?

это пример: DEMO

я попытался last-child, но это не то, что я хочу. я использовал этот класс:

HTML:

<ul> 
    <li><span>test</span></li> 
    <li> 
     <span>test</span> 
     <span>test</span> 
    </li> 
</ul> 
<div> 
    <span>test</span> 
    <span>test</span> 
</div> 
<p> 
    <span>test</span> 
    <span>red</span> 
</p> 

CSS:

span:last-child{ 
    color:red; 
    font-weight:bold; 
} 

я хочу последний span с "красным" содержанием, чтобы быть красным. как я могу это сделать с помощью css?

обновление: есть решение с last-of-type для элементов с одинаковыми родителями. но как насчет разных родителей?

Answer 1

Попробуйте это: (вы должны быть осведомлены о родительской обертке элементе)

body > *:last-child > span:last-child{ 
    color: red; 
} 

Working Fiddle