Tag Cloud Block Elements
COMPONENT SELECTOR GUIDE
Tag Cloud 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) |
|---|---|---|
| .sqs-block-tagcloud | The tag cloud blocks container. |
|
| .sqs-block-tagcloud .sqs-tagcloud | The tag cloud blocks list element. |
|
| .sqs-block-tagcloud .sqs-tagcloud li | The list items. |
|
| .sqs-block-tagcloud .sqs-tagcloud li a | The anchor links. |
|
| .sqs-block-tagcloud a[href="URL_GOES_HERE"] | A specified tag anchor link. |
|
| .sqs-block-tagcloud .name | The anchor link span text. |
|
HTML Structure Explanation
The HTML structure of the tag cloud block elements.
The HTML structure of the tag cloud block elements.
Unique Tag Cloud 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 Tag Cloud 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 Tag Cloud block element with a class name of “sqs-block” and an id attribute.