Use CSS :not() instead of applying and unapplying borders on navigations

css-not.scss

.nav-tab {
  ...
  // instead of putting it on
  border-right: 1px solid #424242;
  &:last-child {
    border-right: 0; // and then taking it off
  }
  // use CSS not() to only apply to the elements you want
  &:not(:last-child) {
    border-right: 1px solid #424242;
  }
  ...
}

Why?

.nav-tab {
    &:nth-last-child(n+2) {
        border-right: 1px solid #424242;
    }
}

@span88 ... Because it's easier to read? Of course, they both work.

@span88 +1

In the case of &:not(:last-child) the intent is very clear, and the CSS selector defines the border the way a human would describe it. @span88's code works but it's exactly the sort of CSS code I hope I never have to read...

& + & would also work.

@AllThingsSmitty is suggesting a lobotomized owl (see: http://alistapart.com/article/axiomatic-css-and-lobotomized-owls), which is a generalized solution to this type of problem... but works backwards. it selects any .nav-tab that has a preceding .nav-tab sibling. As such, you'd want to use:

.nav-tab {
    & + &  {
        border-left: 1px solid #424242;
    }
}

The main advantage? IE 7&8 support + and not :not assuming you need to take that much care.

@AllThingsSmitty This is great. Thanks for the tip!

+1 Cool! Didn't know this one! =)