Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Applying last child selector for Sass in menu

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;
    }
}
like image 540
user1781367 Avatar asked Nov 12 '13 15:11

user1781367


2 Answers

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.

like image 198
Shauna Avatar answered Sep 28 '22 06:09

Shauna


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.

like image 44
Christoph Avatar answered Sep 28 '22 07:09

Christoph