CSS Targeting Tips for Squarespace: How To Change One Thing with CSS

This tutorial was recorded in Squarespace 7.1 but also applies to legacy sites built on version 7. For more information, visit insidethesquare.co/themes

This tutorial is an overview of how to target specific things in Squarespace so you can edit them with custom code.

We’ll take a look at the three main types of unique IDs - collection, section, and block - and how to combine them with selectors (aka code names) so you can customize just about anything and everything in your Squarespace site!

I am using my Squarespace version 7.1 demo site; block IDs exist in version 7 but things like page sections and collections are a little different depending on what theme you are using.

This is a link to the free chrome extension I use in the video. I’m not affiliated with them in any way; just a fan!

Here is a quick recap of order of ops discussed in the video:

#collection-id [data-section-id] #block-id .selector

Here is a quick rundown of the typical symbols used:

Using a data section? Add [square brackets]

Using a block ID? Start with a #

Making one code change to multiple targets? Separate them with a comma.

Here is an example of changing H2 text color in a block id:

#block-123456 h2{color: orange}

And here is an example of changing all the buttons in a data section to blue:

[data-section-id=”123456”] .sqs-block-button-element {background-color: blue!important}