How to Change Background Colors of Simple Auto List Items in Squarespace

May 29

Squarespace's Simple Auto List is one of those section that looks clean out of the box but doesn't give you much to work with in terms of styling. If you want each list item to have its own background color — think alternating brand colors, a traffic light layout, or just a more visual feature section — there's no setting for that. You have to do it with CSS.

The good news is it's a short snippet and easy to customise.

The code

/* Auto List item background colors - sqspguru.com */
.user-items-list-section {
  li:nth-child(1) {
    background: #18C3EA !important;
  }
  li:nth-child(2) {
    background: #DC3C4C !important;
  }
  li:nth-child(3) {
    background: #208C5A !important;
  }
}

Replace the hex values with whatever colors fit your brand. Each nth-child number maps directly to the list item position — first, second, third, and so on.

How to add

Go to Custom Code→ Custom CSS in your Squarespace panel
Paste the code at the bottom of any existing CSS
Replace the hex color values with your own
Hit Save and check your list on the page

Adding more items

If your list has more than three items, just keep going:

li:nth-child(4) {
  background: #F4A300 !important;
}
li:nth-child(5) {
  background: #6A5ACD !important;
}

There's no limit — add as many as you need to match the number of items in your list.

Odd and Even Shortcut

If you have a long list and don't want to target every item individually, you can use ODD and EVEN to alternate between two colors automatically:

.user-items-list-section {
  li:nth-child(odd) {
    background: #18C3EA !important;
  }
  li:nth-child(even) {
    background: #DC3C4C !important;
  }
}

odd targets items 1, 3, 5, 7 and so on. even targets items 2, 4, 6, 8. No matter how many items you add to the list, the colors will alternate automatically — you never have to touch the CSS again.

This is the cleaner approach if all you need is a two-color alternating pattern. Use individual nth-child numbers only when each item needs its own unique color.

Apply colors to one section only

The code above targets every Simple Auto List on your site. If you only want to style one specific section, you'll need to use that section's unique ID instead of the global class.

To find your section ID, use the Squarespace ID Finder Chrome extension — it lets you click any section and instantly grab the ID without touching the inspector.

Once you have it, swap .user-items-list-section for your section ID:

/* Target a specific section only */
#your-section-id {
  li:nth-child(1) {
    background: #18C3EA !important;
  }
  li:nth-child(2) {
    background: #DC3C4C !important;
  }
  li:nth-child(3) {
    background: #208C5A !important;
  }
}

This keeps the styling contained to that one section and won't affect any other auto lists on your site.

Final Result

Once saved, each item in your Simple Auto List will display its own background color. It works well for feature sections, pricing breakdowns, service lists, or anywhere you want a bit more visual separation between items — without reaching for a third-party tool or rebuilding the section from scratch.