Targeting Tricks for Squarespace

Are you ready to take your Squarespace website design to the next level? If so, understanding how to target content using unique ids and selectors with custom CSS is essential.

This blog post is a basic overview of what Squarespace ids and selectors are, and why they’re important for customizing your website. In this post you’ll find a video overview followed by a written description.

---

What are selectors in Squarespace?

Selectors are code names that a browser uses to identify content on a site. There are some universal selectors in CSS that almost every website development platform uses. These are based on HTML, a basic code language that classifies the content of a site. 

• IMG is a selector that means image. 

• A is for active link. 

• P is for paragraph text. 

• H1, H2, and H3 are heading one, heading two, and heading three, respectively. 

For example, img is the selector for all images. If you use the code

img {border-radius: 15px}  

you’ll curve the corner of every image on a website. But let’s say you only want to curve the corner of the page section background image in Squarespace. You can use the selector

.section-background img {border-radius: 15px}

to isolate that specific type of image.

Here is another example for active links. If you want to make the active links on a website blue; that code is

a {color: blue}

but what if you only want that to happen to active links inside the header of your website, and not the page? You can use the header selector to specify that specific location like this:

header a {color: blue}

What are the unique ID’s in Squarespace?

Inside Squarespace version 7.1, pages have a unique collection id, page sections have a unique data section id, and each content block has its own block id. You can use these to target specific things on your Squarespace website.

For example, if I wanted to curve the border radius of one specific page section background in my Squarespace site, but only that page section background and nothing else, my code would look like this:

[data-section-id=”123456]
.section-background img {border-radius: 15px}

Where do I find block ids?

You can use Chrome inspector tools to identify unique collection, section, and block ids, or you can use the same free Chrome extension I use! Please note that Insidethesquare.co is not affiliated with this chrome extension or its creators; just a fan. Here is a link to the Squarespace id chrome extension: chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff

Where can I find a list of selectors for Squarespace?

In my Squarespace CSS cheat sheet 😎 This digital database is a collection of CSS info that I use to create unique Squarespace websites.

It includes a HUGE list of Squarespace selectors you can use in your own work! I’ve also included some premade code snippets and pro tips to help you get started.

Targeting block IDs and selectors in Squarespace can seem intimidating at first – but don’t worry! Once you figure out how they work together, it becomes much easier (and more fun!) than it looks at first glance.

With this knowledge under your belt combined with some practice using my custom codes, soon enough mastering this skill will feel like second nature.

So don’t be afraid – get creative with your website design today & have fun with your Squarespace website.