← #29 Separate list items
#30

Remove the border from the last navigation item

Topics: CSS

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

Fix a typo or suggest an improvement
#31 Check if the browser supports for an element attribute