Social Links Block Elements
COMPONENT SELECTOR GUIDE
Social Links 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-socialaccountlinks-v2 | The social links block container. |
|
| .sqs-block-socialaccountlinks-v2 .sqs-svg-icon--list | The parent nav container for the social links. |
|
| .sqs-block-socialaccountlinks-v2 .sqs-svg-icon--wrapper | The anchor link wrappers for each individual icon. |
|
| .sqs-block-socialaccountlinks-v2 .sqs-svg-icon--wrapper.instagram-unauth | The anchor link wrapper for the instagram icon. |
|
| .sqs-block-socialaccountlinks-v2 .sqs-svg-icon--wrapper.facebook-unauth | The anchor link wrapper for the facebook icon. |
|
| .sqs-block-socialaccountlinks-v2 .sqs-svg-icon--wrapper.youtube-unauth | The anchor link wrapper for the youtube icon. |
|
| .sqs-block-socialaccountlinks-v2 .sqs-svg-icon--wrapper .sqs-svg-icon--social | The social SVG icons. |
|
| .sqs-block-socialaccountlinks-v2 .sqs-svg-icon--wrapper.instagram-unauth .sqs-svg-icon--social | The instagram social SVG icons. |
|
| .sqs-block-socialaccountlinks-v2 .sqs-svg-icon--wrapper.facebook-unauth .sqs-svg-icon--social | The facebook social SVG icons. |
|
| .sqs-block-socialaccountlinks-v2 .sqs-svg-icon--wrapper.youtube-unauth .sqs-svg-icon--social | The youtube social SVG icons. |
|
HTML Structure Explanation
The HTML structure of the social links block elements.
The HTML structure of the social links block elements.
Unique Social Links 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 Social Links 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 Social Links block element with a class name of “sqs-block” and an id attribute.