A block ID in Squarespace is the unique label attached to every block on the site, in the form block-yui_3_17_2_1_1598291655232_24312 or, on newer 7.1 sites, block-8f2c..., and you need it whenever custom CSS should affect one block rather than every block of its type. The fastest way to find a block ID is the free Squarespace ID Finder Chrome extension, which shows block, section and collection IDs on hover; the manual way is right-click, Inspect, and read the id="block-…" attribute on the element wrapping the block. Both take under a minute once you know what you are looking at. This post covers both methods, section and page IDs (which work the same way and are needed just as often), how to write the CSS once you have the ID, and the reasons an ID sometimes stops working.
What is a block ID in Squarespace, and why do you need it?
Squarespace generates an ID for every block when it is added to a page, and writes it into the page’s HTML as the id attribute of the block’s outer div. Site Styles and Custom CSS otherwise work by class: .sqs-block-button is every button block on the site. To style just the one button on the pricing page, you prefix the rule with its ID: #block-yui_3_17_2_1_… .sqs-block-button-element. The same idea gives you three levels of targeting:
| Level | ID looks like | Use it to style |
|---|---|---|
| Block | block-yui_3_17_2_1_1598291655232_24312 (classic) or block-6b7a… (Fluid Engine) | One block: a button, image, text block, form |
| Section | data-section-id=”6f2e…” on the section element (7.1) | One section: its padding, background, all headings inside it |
| Page (collection) | collection-5d9c… on the body element | One page: everything on it, including header behaviour |
Method 1: the Squarespace ID Finder extension
- Install Squarespace ID Finder from the Chrome Web Store (Will Myers’ free extension; Edge and Brave run it too).
- Open your live site, not the editor, and click the extension icon.
- Every block, section and collection shows its ID as an overlay. Click an ID to copy it.
- Paste it into your CSS with a
#in front.
This is what I use. The one habit worth keeping is to check the ID still points at the right block after rearranging a page, because duplicating or replacing a block generates a new ID.
Method 2: Inspect the page
- On the live site, right-click the block and choose Inspect (Chrome, Edge, Firefox, Safari with the Develop menu on).
- The developer panel highlights an element inside the block. Move up the tree (hover over the parent lines) until you reach a
divwhoseidstarts withblock-. It also has classes likesqs-blockandimage-block, which tell you the block type. - Double-click the ID value to select it, copy, and use it with
#in front. - For a section, keep going up until you reach
sectionwithdata-section-id; for the page, thebodytag’s ID.
Will Myers’ own write-up of the manual method includes the bookmarklet version, a browser bookmark that overlays the IDs without an extension, useful on a browser where you cannot install one.
How do you use the ID in CSS?
/* one button */
#block-yui_3_17_2_1_1598291655232_24312 .sqs-block-button-element {
background-color: #F3500F !important;
}
/* one image block: rounded corners */
#block-6b7a2c3d4e5f .sqs-block-image img { border-radius: 16px; }
/* one section: less padding and a different heading font */
section[data-section-id="6f2e1a9b8c7d"] .content-wrapper { padding-top: 40px !important; }
section[data-section-id="6f2e1a9b8c7d"] h2 { font-family: 'Playfair Display', serif; }
/* one page: hide the footer */
body#collection-5d9c4b3a2f1e footer { display: none; }Paste into Website, Website Tools, Custom CSS. The full set of selectors for common jobs is in the Squarespace CSS cheat sheet; the button colour and vertical line guides are the two most common reasons anyone goes looking for a block ID in the first place.
Block ID vs section ID vs anchor link
They are three different things that look alike. The block ID and section ID are generated by Squarespace and used for CSS. An anchor link slug is one you type into a section’s settings so that /page#slug scrolls to it; it is for links, not styling, and anchor links in Squarespace covers it. You can also link to a section by its generated ID (#section-id works as an anchor), but a typed slug is readable and survives a redesign.
Why does the block ID not work?
| Symptom | Cause | Fix |
|---|---|---|
| CSS does nothing | Missing the # prefix, or a typo in a long ID | Copy the ID from the extension rather than retyping |
| Worked, then stopped | Block was duplicated, replaced or the page rebuilt; new ID | Find the new ID |
| Works in editor, not live (or the reverse) | Editor wraps blocks differently; caching | Test on the live site in a private window |
| Applies to the wrong block | Two IDs copied from different pages, or a class selector left in without the ID | Check the rule targets exactly one block |
| Squarespace styles override it | Specificity | Add !important, or make the selector more specific by including the block class |
| ID found but it is a data-block-id, not an id | You copied the attribute from the wrong element | Use the id attribute on the outer sqs-block div |
Block IDs are stable as long as the block exists, so a site styled this way holds up for years; the fragile part is a redesign that rebuilds pages, which is why the CSS file on a Squarespace site I build carries a comment above every ID-based rule saying which page and block it belongs to.
Frequently asked questions
Install the free Squarespace ID Finder Chrome extension, open the live site and click the icon to see every block ID; or right-click the block, choose Inspect, and read the id=”block-…” attribute on the block’s outer div.
Targeting one block with custom CSS. Prefix the ID with # in Website, Website Tools, Custom CSS, and the rule applies only to that block instead of every block of that type.
With the ID Finder extension, which shows section IDs alongside block IDs, or by inspecting the page and finding the section element’s data-section-id attribute. Use it as section[data-section-id=”…”] in CSS.
Not while the block exists. Duplicating, replacing or rebuilding a block creates a new ID, so re-check IDs after a page is rearranged.
No. IDs are generated by Squarespace. For a readable target, wrap content in a Code block with your own id or class, or use an anchor link slug for scrolling.
It is a free, widely used extension by the Squarespace plugin developer Will Myers that only reads the page you are viewing. A bookmarklet alternative exists for browsers without extensions.
