csscss-selectors

how to select last element in the page?

is there any way to select last appear of a specific element with css?

this is an example: DEMO

i tried last-child but this is not what i want. i used this class:

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;
}

i want the last span with "red" content to be red. how i can do it with css ?

update: there is a solution with last-of-type for elements with same parents. but what about different parents ?

Solution

  • Try this: (you should be aware of the parent wrapper element)

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

    Working Fiddle