Why?
There is no built and straight forward in CSS we can use to target only the home page in Squarespace UK. 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 bow.
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 would Internet Explorer 11 and below. Whilst taking that on board, we are not testing our sites in Internet Explorer, in 95% of situations that browser is old news.
Get the CSS ID of the home page body tag
There are 2 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 locating 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 on your own specific Squarespace site.
The code above targets the home page only. So let's now out into 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 every other page BUT 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 2 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.