Archive Block Elements
COMPONENT SELECTOR GUIDE
Archive Block Elements
Relevant CSS Selectors
| CSS Selector(s) | HTML Element | Picture of Element (the blue area highlights the element; the green area highlights the element's padding; the orange area highlights the element's margin) |
|---|---|---|
| Outer Containers | ||
| .sqs-block-archive | The archive blocks container. |
|
| .sqs-block-archive .archive-block-wrapper | The outer archive content wrapper. |
|
| .sqs-block-archive .archive-block-wrapper.archive-block-setting-layout-index | The outer archive content wrapper using the "Index" layout. |
|
| .sqs-block-archive .archive-block-wrapper.archive-block-setting-layout-list | The outer archive content wrapper using the "List" layout. |
|
| .sqs-block-archive .archive-block-wrapper.archive-block-setting-layout-dropdown | The outer archive content wrapper using the "Dropdown" layout. |
|
| .sqs-block-archive .archive-group-list | The list of archive groups. |
"Index" Layout
"List" Layout
"Dropdown" Layout
|
| Archive Group Elements | ||
| .sqs-block-archive .archive-group | The archive groups. |
"Index" Layout
"List" Layout
"Dropdown" Layout
|
| .sqs-block-archive .archive-group-name-link | The Group name link. |
"Index" Layout
"List" Layout
"Dropdown" Layout
|
| .sqs-block-archive .archive-group-count | The group count number (if enabled). |
|
| .sqs-block-archive .archive-group-count:before, .sqs-block-archive .archive-group-count:after | The parentheses around the group count number (if enabled). |
|
| .sqs-block-archive .archive-item-list | The items list below the group name link. |
|
| .sqs-block-archive .archive-item | The list items. |
|
| .sqs-block-archive .archive-item-link | The item link. |
|
| .sqs-block-archive .archive-item-date-after | The item date. |
|
| Archive Toggle Button in "Dropdown" Layout | ||
| .sqs-block-archive .archive-dropdown-toggle-label | The item date. |
|
| .sqs-block-archive .archive-dropdown-toggle-title | The item date. |
|
| .sqs-block-archive .archive-dropdown-toggle-icon | The item date. |
|
| .sqs-block-archive .archive-dropdown-toggle-icon:before | The item date. |
|
HTML Structure Explanation
The HTML structure of the archive block elements.
The HTML structure of the archive block elements.
Unique Archive Blocks Using the Block ID
Relevant CSS Selectors
| CSS Selector(s) | HTML Element | Picture of Element (the blue area highlights the element; the green area highlights the element's padding; the orange area highlights the element's margin) |
|---|---|---|
| #block-yui_3_17_2_1_1698185483093_9220 | Targets a unique Squarespace element using its unique ID attribute. The selector in the left column is just the general form of the block ID, but the characters that come after "#block-" will be different for each element. |
|
HTML Structure Explanation
Every Squarespace block element, such as the Archive Block, will have a class name of “.sqs-block”. This element will additionally have an ID attribute that begins with “block-” and ends with a random string of characters as pictured below.
An Archive block element with a class name of “sqs-block” and an id attribute.