Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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

This comment has been minimized.

Copy link

span88 commented Jun 8, 2015

Why?

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

This comment has been minimized.

Copy link

rnevius commented Jun 8, 2015

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

@mems

This comment has been minimized.

Copy link

mems commented Jun 8, 2015

@span88 +1

@enyo

This comment has been minimized.

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

This comment has been minimized.

Copy link
Owner Author

AllThingsSmitty commented Jun 8, 2015

& + & would also work.

@littlefyr

This comment has been minimized.

Copy link

littlefyr commented Jun 8, 2015

@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

This comment has been minimized.

Copy link

tannerhodges commented Jun 12, 2015

@AllThingsSmitty This is great. Thanks for the tip!

@espellcaste

This comment has been minimized.

Copy link

espellcaste commented Jun 14, 2015

+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
You can’t perform that action at this time.