Remove the border from the last navigation item

We often use the :last-child selector to unapply particular styles (such as border) for the last item.
Creating a navigation that each item has a bottom border usually looks like:

li {
    border-bottom: 1px solid #E5E7EB;
}

/* Don't add border to the last item */
li:last-child {
    border-bottom: none;
}

Using the :not pseudo-class, we can make the code shorter and more easy to maintain with a single CSS declaration:

/* Add the border to all items except the last one */
li:not(:last-child) {
    border-bottom: 1px solid #E5E7EB;
}

Another approach is to use the + selector:

li + li {
    border-top: 1px solid #E5E7EB;
}

Demo

• 1LOC
• CSS Layout
• HTML DOM
• Responsive Design Patterns
• this VS that