If you are trying to customise your Squarespace website with CSS style changes then you are going to then you are going to need to know how to find ID and class selectors.

Here is a guide on how to find ID and class selectors for your Squarespace website:

The easiest way to find ID and class selectors for your Squarespace website is with the Google Chrome browser. Open Google chrome and login to your website.

If you don’t use Google Chrome you can download it here.

We also recommend this useful extension to find block ID’s: Squarespace Collection/Block Identifier

Find your specific selector

The most common selector we use when customising Squarespace websites is the page section ID. To find the ID of a page section on your Squarespace website just right click on the background of section that you want select and click on ‘inspect element’ from the drop down menu.

The developer tools window will open and usually “content wrapper” section will be highlighted. If you scroll up from there or look for the section that begins with:

<section class=page-section

Click on this section and about half way down you will see something like this:

data-section-id="xxxxxxxxxxxxxxxxxxxxxxx

• The class is: page-section

• The section ID is: data-section-id="5e1230f488456a2a6f5faf3b"

• each page section ID will have a different code where X is shown.

How to use your specific selector

We can use this page section class and ID to customise the styles in this section only. We just add this code to your custom CSS. We will use the ‘blog read more’ link as a random example.

.page-section[data-section-id="5e1230f488456a2a6f5faf3b"] {
h3 {color:red;}}

If you have any questions or need any help with your Squarespace website design post a comment below or get in touch now.