Squarespace CSS: How to find page ID and class selectors
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;}}
Squarespace is easy to use but there are still many benefits to hiring a professional web designer to build your website.