[Questions] Ordering of selector with id and class selectors, space after id-selector

a short update:

I managed to get the the selectors in the right order when using selectors.unshift(idSelector) instead of selectors.add(idSelector) in above sample.

Now i still have the issue with the missing space between the id- and the class-selectors.

Until now I could not find a way to get into Selectors.getFullString(..) to change the behavior

Hi @dintifla SelectorManager is not meant to work like that (you can only have a mix of classes .class1.class2 but not with IDs), but honestly I don't understand what is your goal of using the SelectorManager at all. If you need to query a component in the editor you can just do this anyParentComponent.find('#my-id .my-class')[0]

Hi @artf Thanks for your reply. In the end it is not just about querying a component, but generate the CSS for it. I don't need the HTML since my application is designed in a rich client application, stored in an abstract representation into the database and then parsed into a DOM. As a result, I can't use the IDs generated by GrapesJS, since I have no chance to store back HTML (or any other representation of the DOM).

In the end, i expect all my rules to look like this: #top-level-component-id .my-class { ...}

maybe as a simple example, the generated HTML of a button:

<div id="_4b9c8f66-85d3-4488-8e23-5932bc3e8420"
    class="dx-button dx-button-normal dx-widget dx-button-has-text dx-button-mode-contained" role="button"
    aria-label="x" tabindex="0">
    <div class="dx-button-content"><span class="dx-button-text">Close</span></div>
</div>

to change the label of that specific button my CSS would look like this: #_4b9c8f66-85d3-4488-8e23-5932bc3e8420 .dx-button-text {...}