adding >> after li, except for last li

Question

I'm developing a breadcrumb like this:

<div class="breadcrumb">
  <ul>
    <li><a href="behandelingen.html">Behandelingen</a></li>
    <li><a href="behandelingen-cat.html">Gelaatsverzorgingen</a></li>
    <li class="active">Environ Discovery</li>
 </div>

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 ?

score 15 · Accepted Answer · answered Mar 29 '14 at 11:01

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

1 Answers1