Elements Class and ID Structure

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.