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

Remove the border from the last navigation item

Remove a property from an object

Replace multiple if statements with a lookup table