Use :not() to Apply/Unapply Borders on Navigation

Instead of putting on the border…

  1. /* add border */
  2. .nav li {
  3.   border-right: 1px solid #666;
  4. }

…and then taking it off the last element…

  1. /* remove border */
  2. .nav li:last-child {
  3.   border-right: none;
  4. }

…use the :not() pseudo-class to only apply to the elements you want:

  1. .nav li:not(:last-child) {
  2.   border-right: 1px solid #666;
  3. }

Here, the CSS selector is read as a human would describe it.

Demo