This post has been rewritten for 2025, see here.
Why?
There is no built-in and straightforward way in CSS that we can use to target only the home page. Luckily, there is something we can do, and it's quite easy to do so.
By learning this simple CSS pseudo class, you will build your CSS knowledge, and this just gives you another CSS skill to your belt. We learned this when building Squarespace Premium templates.
Browser Support
When using any newish CSS selector, it's always a good idea to check web browser support. Can I Use is an incredible resource that makes this so easy to do, so there should be no excuses for not doing this. The Can I Use:not page says that browser support is good, and the only real worry is Internet Explorer 11 and below. While taking that on board, we are not testing our sites in Internet Explorer, and in 95% of situations, that browser is old news.
Get the CSS ID of the home page body tag
There are two ways to grab the ID of the home page. The first is using dev tools in any popular web browser such as Firefox, Chrome or Safari. They all work in a very similar fashion. This is what I will cover in this short tutorial. The second way is to use the very popular Chrome Squarespace extension.
Once we locate the CSS ID of the home page within your Squarespace site, we can get to work with CSS.
Targeting the header element on only the home page
body#collection-64fcc068d64d4168438ad380 header{background-color: grey}The above code is taken from Checked Analytics, a site I recently built on Squarespace. VERY important - You will need to change this ID to whatever the home page ID is on your own specific Squarespace site.
The code above targets the home page only. So let's now use the :not pseudo class.
Targeting the header element every page BUT the home page using CSS :not
body:not(#collection-64fcc068d64d4168438ad380) header{background-color: #a4e5fa}The code directly above targets and sets the background colour on all header tags on every other page, BUT not on the home page.
Targeting the footer element on only the home page
body#collection-64fcc068d64d4168438ad380 footer{background-color: #e3e3e3}Targeting the footer element on every page BUT the home page
body:not(#collection-64fcc068d64d4168438ad380) footer{background-color: blue}Chaining multiple :not's
body:not(#collection-64fcc068d64d4168438ad380):not(#collection-55566666gbv444444) footer{background-color: blue}Hopefully you can see from the code directly above, you can have multiple :not's. There is no limit to the number you can chain, but two dozen would be very error-prone.
General example using :not
h2:not(:first-child){
margin-top: 2em
}On every page, this will target every H2, BUT the very first H2.
You made it
So there you have it, using the CSS :not pseudo-class with usages within your Squarespace sites.