How do I find the CSS selector for any element in Squarespace?

Right-click any element on your Squarespace site and choose Inspect (or Inspect Element). This opens the browser's developer tools showing the HTML structure. The highlighted element's classes and IDs are your CSS selectors.

Look for unique classes like section IDs (data-section-id), block IDs (.sqs-block), or semantic classes (.header-nav-item). Avoid using randomly generated classes that might change — stick to stable, semantic selectors.

/* Common Squarespace 7.1 selectors reference */

/* Header */
#header { }
.header-nav-item a { }
.header-title-logo img { }

/* Sections */
.page-section { }
[data-section-id="YOUR_ID"] { }

/* Blocks */
.sqs-block-content { }
.sqs-block-image { }
.sqs-block-button-element { }

/* Footer */
#footer { }
.footer-nav-item a { }

/* Blog */
.blog-item-content { }
.blog-title { }
.blog-meta-item--date { }