CSS Protip: Use :not() Instead of Applying/Unapplying Borders on Navigation

You might find :not() to be useful and easier then how we’ve traditionally removed and applied those borders, et al.

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

I’ve added a gist: https://gist.github.com/AllThingsSmitty/208f88399960b0b22241

Hi AllThingsSmitty, welcome to the forum.

And your question or point is … ?

Simply sharing a tip that might be helpful to others.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.