Code Block Elements
COMPONENT SELECTOR GUIDE
Code 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-code | The code block container. |
|
| .sqs-block-content | The code block content. |
|
| .sqs-block-content PUT_SELECTORS_HERE | You can replace the placeholder in this selector with any HTML elements you've added to a code block. |
|
| .sqs-block-quote .source-code | The code block content that has the "Display Source Code" option enabled. |
|
HTML Structure Explanation
The HTML structure of the code block elements.
Regular Code Block HTML
The HTML structure of the code block elements.
Code Block HTML with “Display Source Code” Enabled
The HTML structure of the code block elements.
Unique Code 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 Code 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 code block element with a class name of “sqs-block” and an id attribute.