Audio Block Elements
COMPONENT SELECTOR GUIDE
Minimal Audio 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 Container | ||
| .sqs-block-audio | The audio block container. |
|
| Inner Container + Color Themes | ||
| .sqs-block-audio .sqs-widgets-audio-player | An inner container for the player elements. This element also contains a class name corresponding the color theme being used to style the block. |
|
| .sqs-block-audio .sqs-widgets-audio-player.dark | An inner container for the player elements which uses the "Dark" theme. This element also contains a class name corresponding the color theme being used to style the block. |
|
| .sqs-block-audio .sqs-widgets-audio-player.light | An inner container for the player elements which uses the "Light" theme. This element also contains a class name corresponding the color theme being used to style the block. |
|
| Player Elements | ||
| .sqs-block-audio .player | The flexbox container that contains the player elements. |
|
| .sqs-block-audio .action | The far left flex item that contains the play/pause button. |
|
| .sqs-block-audio .play | The play button container. |
|
| .sqs-block-audio .play-button | The play button element styled to look like a play button. |
|
| .sqs-block-audio .pause | The pause button container. |
|
| .sqs-block-audio .pause-button | The pause button element styled to look like a pause button. |
|
| .sqs-block-audio .track | The progress track indicator container. |
|
| .sqs-block-audio .played | The track element that shows how much of the audio file has been played. |
|
| .sqs-block-audio .icon | The element at the end of the "played" element that is styled to look like a border. |
|
| .sqs-block-audio .labels | The middle flex element that contains the audio file title and author. |
|
| .sqs-block-audio .title | The audio file title. |
|
| .sqs-block-audio .artistName | The audio file artist name. |
|
| .sqs-block-audio .secondary-controls | The outer container for the current time and the file's total time. |
|
| .sqs-block-audio .time | The parent container for the current time and the file's total time. |
|
| .sqs-block-audio .progress | The progress time. |
|
| .sqs-block-audio .total | The total time. |
|
| .sqs-block-audio .total:before | The psuedo-element that adds the forward slash between the progress and total time. |
|
| .sqs-block-audio .download a | The "Download" link. |
|
HTML Structure Explanation
The HTML structure of the audio block elements.
The HTML structure of the audio block elements.
Classic Audio 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 Container | ||
| .sqs-block-audio | The audio block container. |
|
| Inner Containers | ||
| .sqs-block-audio .sqs-audio-embed | An inner container for the player elements. This element also contains a class name corresponding the color theme being used to style the block. |
|
| .sqs-block-audio .sqs-audio-player | The outer container that contains the player elements. |
|
| .sqs-block-audio .sqs-audio-player.play-state-stopped | The outer container that contains the player elements when the player is in it's default state. |
|
| .sqs-block-audio .sqs-audio-player.play-state-paused | The outer container that contains the player elements when the player is paused. |
|
| .sqs-block-audio .sqs-audio-player.play-state-playing | The outer container that contains the player elements when the player is playing. |
|
| Player Elements | ||
| .sqs-block-audio .controls | The far left flex item that contains the play/pause button. |
|
| .sqs-block-audio .sqs-audio-player.play-state-playing .controls:after | The play button elements. |
|
| .sqs-block-audio .sqs-audio-player:not(.play-state-playing) .controls:after, .sqs-block-audio .sqs-audio-player:not(.play-state-playing) .controls:before | The pause button elements. |
|
| .sqs-block-audio .placeholder | The container for the player elements when the player is in the default state on page load. |
|
| .sqs-block-audio .placeholder .wrapper | The progress track indicator container. |
|
| .sqs-block-audio .audio-author | The audio file artist name. |
|
| .sqs-block-audio .audio-title | The audio file title. |
|
| .sqs-block-audio .volume | The container for the volume indicators. |
|
| .sqs-block-audio .volume .bar | The volume bars. |
|
| .sqs-block-audio .volume .bar.active | The active volume bars. |
|
| .sqs-block-audio .volume .bar:not(.active) | The inactive volume bars. |
|
| .sqs-block-audio .duration | The parent container for the current time and the file's total time. |
|
| .sqs-block-audio .progress | The outer progress indicator container. |
|
| .sqs-block-audio .progress-inner | The inner progres indicator. |
|
| .sqs-block-audio .download a | The "Download" link. |
|
HTML Structure Explanation
The HTML structure of the audio block elements.
The HTML structure of the audio block elements.
Unique Audio 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_1698165393039_7539 | 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 Audio 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 Audio block element with a class name of “sqs-block” and an id attribute.