Applying last child selector for Sass in menu

Question

Working on a navigation using Sass. I'm trying to use :last-child selector to apply different link color(red) for the last menu link but no success. Can anyone show me how to achieve from the following Sass code? below is the code I have so far. Any advice would be greatly appreciated!

HTML

<ul class="menu">
   <li>
       My Navigation
   </li>
   <li>
       <a href="#">First Link</a>
   </li>
   <li>
       <a href="#">Second Link</a>
   </li>
   <li>
       <a href="#">Third Link</a>
  </li>
</ul>

Sass

.menu {
    @include inline-list;
    font-size: 13px;


    &, a {
        color: black;
        text-decoration: none;

    }
    > * + * {
        margin-left: .5em;

        + *:before {
            content: ">";
            margin-right: .5em;
        }
    }

    & a ul li:last-child {
        color: red;
        font-weight: bold;
    }
}

Solution 1

Your CSS is off. Your last line is targeting the last child of an li that's a child of an anchor tag. Also, you don't need to use & when targeting children of the selector you're nesting in.

So, change your last-child selection to:

li:last-child a

and it should work. You need to target the link in order to override your original link declaration.

Solution 2

The following selector works:

& li:last-child a

Check it out in this demo fiddle

You don't need the & though, since it is automatically prepended:

li:last-child a

In every case you should avoid * selectors, they have horrible performance. In almost every case, there is a better selector you could replace this with. In your case,

> li + li {
/*and*/
    &:before {
    }

work too.

&, a

also makes not much sense, since & simply resolves to the parent selector. Unless you intended this, to write DRY code, putting those two declarations in the parent block and omitting the & would be the better option.