last-child applies to all links, but should apply to one?

Question

Last-child doesn't fire. Works on all links instead of the last one. I suspect that I have incorrectly styled the css, but I don’t understand where the error is

.tt-breadcrumb ul li a:last-child {
color: #dd3d53; }

<div class="tt-breadcrumb">
    <ul>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li> 
    </ul>
</div>
 

Answer 1

All the links are the last child of the elements (the lis) they are inside.

If you want to target the last a in the list, then you need to target the last li.

ul li:last-child a

Answer 2

try this:

<style>
.tt-breadcrumb ul li:last-child a {
color: #dd3d53; }
</style>

<div class="tt-breadcrumb">
    <ul>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li> 
    </ul>
</div>