Contextual / Scoped Classes and Descendant Selectors for Atomic Classes

[ffxffxwu]

Describe the Problem

I really like the new Atomic class system in Elementor V4. However, one limitation makes it difficult to scale on larger projects: classes currently work in a flat/global namespace, without the ability to style a class differently based on its parent or context.

For example, I may have multiple modules:

.module-a .module-b

Each module may contain elements with the same logical role:

.left-content .right-content

However, .left-content in .module-a may require completely different styling from .left-content in .module-b.

Because Atomic classes are global, I cannot safely use a generic .left-content class for both. Instead, I have to create unique classes for every module:

.module-a-left-content .module-a-right-content .module-b-left-content .module-b-right-content

This becomes difficult to manage as a project grows.

A website with many sections, cards, components, headers, footers, forms, etc. can easily end up with hundreds of highly specific classes just to avoid naming conflicts.

This creates several problems:

• The Class Manager becomes increasingly difficult to organize and search.
• Class names become unnecessarily long and specific.
• Similar structural roles cannot be reused naturally across different components.
• Refactoring components becomes more difficult.
• Large projects require significantly more class-management overhead.

The Atomic class system is already very powerful, but the flat global class structure limits its scalability for component-based websites.

Propose a Solution

I would like Atomic Classes to support contextual/scoped classes and descendant selectors, allowing a class to have different styles depending on its parent context.

For example:

`.module-a .left-content {
/* styles for left-content inside Module A */
}

.module-b .left-content {
/* different styles for left-content inside Module B */
}`

Instead of creating:
.module-a-left-content .module-b-left-content

I could create reusable structural classes such as .left-content, .title, .description, .media, etc., and style them according to their parent component.

Ideally, Elementor’s UI could allow us to select or create a parent context when editing a class.

For example:

Parent: .module-a
Child: .left-content

Which generates/styles:

.module-a .left-content

This could eventually support other common CSS relationships as well, such as:

.module-a > .content .module-a .title .module-a:hover .title .module-a.is-active .title

This would bring the Atomic class system closer to the flexibility of native CSS while keeping the workflow visual and accessible inside Elementor.

Additional Context

No response

Agreement

• I confirm I have read and followed all the guidelines and instructions outlined in the Feature Request form.
• I agree that my discussion may be closed without further action if it doesn't meet all the requirements outlined in the Feature Request form.