A quick tip that I use all the time when working with list items.

Add CSS properties to all items except the last item:

li {
margin-right: 1rem;
}
li:last-of-type {
margin-right: 0;
}
/* Replace the above lines with this */
li:not(:last-of-type) {
margin-right: 1rem;
}

This also works great for blog listings.

li:not(:last-of-type) {
margin-bottom: 1.25rem;
padding-bottom: 1.25rem;
border-bottom: 1px solid #ddd;
}

I am using this piece of CSS on listing pages of this site.

May 21, 2019, 12:54 PM