Question

<ul>
    <li class="list">test1</li>
    <li class="list">test2</li>
    <li class="list">test3</li>
    <li>test4</li>
</ul>

How do I select the “last child” with the class name: list?

<style>
    ul li.list:last-child{background-color:#000;}
</style>

I know the example above doesn’t work, but is there anything similar to this that does work?

IMPORTANT:

a) I can’t use ul li:nth-child(3), because it could happen that it’s on the fourth or fifth place too.

b) No JavaScript.

Answer 1

I suggest that you take advantage of the fact that you can assign multiple classes to an element like so:

<ul>
    <li class="list">test1</li>
    <li class="list">test2</li>
    <li class="list last">test3</li>
    <li>test4</li>
</ul>

The last element has the list class like its siblings but also has the last class which you can use to set any CSS property you want, like so:

ul li.list {
    color: #FF0000;
}

ul li.list.last {
    background-color: #000;
}