Skip to content

Instantly share code, notes, and snippets.

@AllThingsSmitty
Last active November 28, 2018 16:16
Show Gist options
  • Save AllThingsSmitty/208f88399960b0b22241 to your computer and use it in GitHub Desktop.
Save AllThingsSmitty/208f88399960b0b22241 to your computer and use it in GitHub Desktop.
Use CSS :not() instead of applying and unapplying borders on navigations
.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;
}
...
}
@span88
Copy link

span88 commented Jun 8, 2015

Why?

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

@rnevius
Copy link

rnevius commented Jun 8, 2015

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

@mems
Copy link

mems commented Jun 8, 2015

@span88 +1

@enyo
Copy link

enyo commented Jun 8, 2015

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...

@AllThingsSmitty
Copy link
Author

& + & would also work.

@littlefyr
Copy link

@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.

@tannerhodges
Copy link

@AllThingsSmitty This is great. Thanks for the tip!

@espellcaste
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment