adding after li, except for last li

Question

I'm developing a breadcrumb like this: ``` ``` I'm styling the breadcrumb using Sass: ``` .breadcrumb { @include outer-container; @include shift(4); margin-top: em(50); padding-left: em(14); li { float: left; margin-right: 15px; } } ``` to add a ">>" after every list item, I added this inside my li definition: ``` &:after{ content: ">>"; margin-left: 10px; } ``` this works fine, but now I want to add a rule that defines not to add a ">>" to the last list item. I tried this: ``` &:after:not(li:last) { content: ">>"; margin-left: 10px; } ``` but that makes all ">>" disappear. Can someone tell me how I can add a ">>" after every list item, except for the last one ?

Accepted Answer

You want `:not(:last-child)` instead:

```
&:not(:last-child):after {
  content: ">>";
  margin-left: 10px;
}
```

`:last` is not a valid CSS selector, and you cannot have more than one simple selector within `:not()`. The `li` portion can be omitted since your nested selector already uses `li`.

`:after`, being a pseudo-element, also needs to be placed after `:not()` for it to be valid.

adding >> after li, except for last li

Solution

Problem