Free Tool

ID Finder & CSS Selector Builder

Find any element on your Squarespace site and build the perfect CSS selector to target it

Why this matters

When you want to style just ONE specific section or block on your Squarespace site — not the whole page — you need its unique ID. Think of it like an address for that element. This guide shows you how to find any ID, and the selector builder writes the CSS targeting code for you.

How to Find Element IDs

Three reliable methods to find the IDs you need for custom CSS

Open your Squarespace site in Chrome, Firefox, or Edge
Right-click on the section or block you want to target
Select Inspect (or press F12)
In the Elements panel, look for data-section-id or data-block-id attributes
Copy the ID value (the long string inside the quotes)

What it looks like in the Elements panel:

<section
  class="page-section"
  data-section-id="652f4a3b2d8e1a0001c3d456"
  style="..."
>
  <div class="section-border">
    <div class="content-wrapper">
      <div
        class="sqs-block"
        data-block-id="7a1b3c5d-e2f4-4a6b-8c9d-0e1f2a3b4c5d"
      >
        <h2>Your Heading Here</h2>
        <p>Your content here...</p>
      </div>
    </div>
  </div>
</section>

Tip: Use Ctrl+F (or Cmd+F) inside the Elements panel to search for "data-section-id" and quickly jump between sections.

Common ID Patterns on Squarespace

data-section-id

652f4a3b2d8e1a0001c3d456

A 24-character hex string assigned to each section. Found on the <section> element.

data-block-id

7a1b3c5d-e2f4-4a6b-8c9d-0e1f2a3b4c5d

A UUID (with dashes) assigned to each content block within a section.

id (section)

id="page" or id="my-custom-page"

Some sections also have a plain id attribute, often based on the page URL slug.

collection-type-blog

data-collection-type="blog"

Collection pages (blog, events, products) have a data-collection-type attribute on the body.

CSS Selector Builder

Paste your IDs, choose what to style, and get copy-paste CSS

Section ID

Block ID (optional)

What to Target

Properties

Property

Value

Generated CSS

/* Enter a Section ID */

Where to paste this:

Squarespace Admin → Design → Custom CSS

Pro

Unlock CSS selector builder

Common Targeting Patterns

Copy-paste solutions for the 10 most common “I want to...” scenarios

Pro

Unlock targeting patterns

Explore More Tools

Build selectors, generate buttons, pick colors, and more with our full suite of Squarespace developer tools.

Explore All Tools