List sections are one of my favorite ways to display content in Squarespace, but the design features aren’t as creative as I would like them to be. Luckily we can use CSS to make some really great-looking list sections!

I have a few past tutorials on list section styles, linked below. In this tutorial, you’ll learn how to use custom code to change the background of individual list items. We’ll change them one by one, then all the odd and even ones, and then I’ll share a neat trick I use to change them in sets of three for repeating content.

As always, the codes are listed in the description below, but make sure you watch the video to learn how to use them before you add them to your Squarespace website!

Here are the codes from this tutorial. Make sure you update the color codes to match the style of your own unique website:

Change individual items

.list-item:nth-of-type(1) {background: #E5F5F6}

.list-item:nth-of-type(2) {background: #F6EDCE}

.list-item:nth-of-type(3) {background: #F8E0D9}

Even and odd

.list-item:nth-of-type(even) {background: #E5F5F6}

.list-item:nth-of-type(odd) {background: #F6EDCE}

Every Three

.list-item:nth-of-type(3n+1) {background: #E5F5F6}

.list-item:nth-of-type(3n+2) {background: #F6EDCE}

.list-item:nth-of-type(3n+3) {background: #F8E0D9}

#️⃣ Data section id Chrome extension (not an affiliate, just a fan!)

⭐ Free Training: Squarespace CSS Basics

📺 Tutorial: How to create list item hover effects in Squarespace

📺 Tutorial: How to use multiple fonts in a list section title in Squarespace

🎨 Your Free Guide to Creating Colors with Code