Elements Class and ID Structure
In this article, we're going to explain how to add Classes and IDs to Elements.
About the Structure of IDs and Classes
When adding classes or IDs to Elements, it is important to remember that often times one singular "element" is actually made up of multiple pieces ("partials"). Because of this, the input of a class or ID will occasionally show up on multiple partials. Additionally, in the case of IDs, these may be slightly modified as you can only have one unique ID on a page at a time (more on this later).
Adding Classes
If you add a class of my-cart
to a Cart Modal, that class would show up on both the toggle that triggers the modal, as well as the modal itself. This is because both pieces make up the modal as a whole, and you may wish to target one or the other, or both. Because of this, if you're only wanting to target one partial of the element, you will want to pair it with another class on the element to specify which piece you want. So if you want to target the toggle, you could use .my-cart.x-anchor
, or for the modal you could use .my-cart.x-modal
.
Additionally, some elements will have what is called a module container around them. This mostly pertains to elements with toggles that trigger a dropdown, as the module container is used as a relative wrapper around all the content to position the dropdown properly. In these cases, a custom class will also be added to this module container. Expanding on our example from before, you could reference this by using .my-cart.x-mod-container
.
Adding IDs
Adding IDs works similarly to classes in that a custom ID will be output to all partials of an element (including mod containers if applicable), but there is one key difference here: a custom ID may have an appended value added to the end of it if there are multiple partials in an element. For example, if you add an ID of my-cart
to a Cart Modal, the toggle will receive an ID of my-cart-anchor-toggle
and the actual modal will receive an ID of my-cart-modal
. This is necessary because a unique ID can be used only once on a page, so if we just output my-cart
as IDs to both partials, this would not only be invalid markup, but it could cause issues if using that ID for any custom scripting.
Furthermore, if the element is wrapped in a module container, that outermost wrapping element will receive the ID unaffected. So adding an ID of my-cart
to a Cart Dropdown would mean that the module container wrapping both the toggle and dropdown would receive my-cart
as the ID without any changes.
Element List
We've included this list below as a quick reference for how the output of classes and IDs are affected by different elements. For each element we will assume a custom class of el-c
and a custom ID of el-id
. We will use CSS selectors as a way of showing the ultimate output of a class and ID, as well as any changes that occur with that ID.
Alert
Classes
.x-alert.el-c
IDs
.x-alert#el-id
Audio
Classes
.x-audio.el-c
IDs
.x-audio#el-id
Breadcrumbs
Classes
.x-crumbs.el-c
IDs
.x-crumbs#el-id
Button
Classes
.x-anchor.el-c
IDs
.x-anchor#el-id
(available after Pro v1.2.7 and X v5.2.5, otherwise,#el-id-anchor-button
)
Cart Dropdown
Classes
.x-mod-container.el-c
.x-anchor.el-c
.x-dropdown.el-c
IDs
.x-mod-container#el-id
.x-anchor#el-id-anchor-toggle
.x-dropdown#el-id-dropdown
Cart Modal
Classes
.x-anchor.el-c
.x-modal.el-c
IDs
.x-anchor#el-id-anchor-toggle
.x-modal#el-id-modal
Cart Off Canvas
Classes
.x-anchor.el-c
.x-off-canvas.el-c
IDs
.x-anchor#el-id-anchor-toggle
.x-off-canvas#el-id-off-canvas
Content Area
Classes
.x-bar-content-area.el-c
IDs
.x-bar-content-area#el-id
Content Area Dropdown
Classes
.x-mod-container.el-c
.x-anchor.el-c
.x-dropdown.el-c
IDs
.x-mod-container#el-id
.x-anchor#el-id-anchor-toggle
.x-dropdown#el-id-dropdown
Content Area Modal
Classes
.x-anchor.el-c
.x-modal.el-c
IDs
.x-anchor#el-id-anchor-toggle
.x-modal#el-id-modal
Content Area Off Canvas
Classes
.x-anchor.el-c
.x-off-canvas.el-c
IDs
.x-anchor#el-id-anchor-toggle
.x-off-canvas#el-id-off-canvas
Counter
Classes
.x-counter.el-c
IDs
.x-counter#el-id
Gap
Classes
.x-line.el-c
IDs
.x-line#el-id
Headline
Classes
.x-text.el-c
IDs
.x-text#el-id
Image
Classes
.x-image.el-c
IDs
.x-image#el-id
Line
Classes
.x-line.el-c
IDs
.x-line#el-id
Map
Classes
.x-frame.el-c
IDs
.x-frame#el-id
Navigation Collapsed
Classes
.x-menu.el-c
(Content Builder and Left / Right regions of the Header Builder only).x-anchor.el-c
(Footer Builder and Top / Bottom regions of the Header Builder only).x-off-canvas.el-c
(Footer Builder and Top / Bottom regions of the Header Builder only)
IDs
.x-menu#el-id
(Content Builder and Left / Right regions of the Header Builder only).x-anchor#el-id-anchor-toggle
(Footer Builder and Top / Bottom regions of the Header Builder only).x-off-canvas#el-id-off-canvas
(Footer Builder and Top / Bottom regions of the Header Builder only)
Navigation Dropdown
Classes
.x-mod-container.el-c
.x-anchor.el-c
.x-dropdown.el-c
IDs
.x-mod-container#el-id
.x-anchor#el-id-anchor-toggle
.x-dropdown#el-id-dropdown
Navigation Inline
Classes
.x-menu.el-c
IDs
.x-menu#el-id
Navigation Modal
Classes
.x-anchor.el-c
.x-modal.el-c
IDs
.x-anchor#el-id-anchor-toggle
.x-modal#el-id-modal
Search Dropdown
Classes
.x-mod-container.el-c
.x-anchor.el-c
.x-dropdown.el-c
IDs
.x-mod-container#el-id
.x-anchor#el-id-anchor-toggle
.x-dropdown#el-id-dropdown
Search Inline
Classes
.x-search.el-c
IDs
.x-search#el-id
Search Modal
Classes
.x-anchor.el-c
.x-modal.el-c
IDs
.x-anchor#el-id-anchor-toggle
.x-modal#el-id-modal
Social
Classes
.x-anchor.el-c
IDs
.x-anchor#el-id
(available after Pro v1.2.7 and X v5.2.5, otherwise,#el-id-anchor-button
)
Text
Classes
.x-text.el-c
IDs
.x-text#el-id
Video
Classes
.x-frame.el-c
IDs
.x-frame#el-id
Widget Area
Classes
.x-bar-widget-area.el-c
IDs
.x-bar-widget-area#el-id
Summary
You've successfully learned how to use Classes and IDs in Elements.
See something inaccurate? Let us know