Amazon Block Elements
COMPONENT SELECTOR GUIDE
Amazon 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-amazon | The amazon blocks container. |
|
| .sqs-block-amazon .product-block | The parent container for the block elements. |
|
| .sqs-block-amazon .image-container | The image container. |
|
| .sqs-block-amazon .image-container a | The image link. |
|
| .sqs-block-amazon .image-container img | The image element. |
|
| .sqs-block-amazon .productDetails | The product details container. |
|
| .sqs-block-amazon .product-title | The product title link. |
|
| .sqs-block-amazon .product-author | The product author. |
|
| .sqs-block-amazon .buy-button | The button container. |
|
| .sqs-block-amazon .sqs-amazon-button | The button link text. |
|
HTML Structure Explanation
The HTML structure of the Amazon block elements.
The HTML structure of the Amazon block elements.
Unique Amazon 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 Amazon 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 Amazon block element with a class name of “sqs-block” and an id attribute.