How to assign multiple classes to one HTML element?

[Doogiemuc]

Hello GrapeJS Team!

First of all GrapeJS is aswesome ! I've seldomly seen a free open source product with such a complexity and quality! Keep up the good work!

I'd have one question about Selectors in GraphJS Studio. I understand that one can add multiple selectors to one element which then forms a CSS in the form of .classOne.classTwo.classThree. But this feels counter intuitive. In most cases web designers want to assign multiple classes to one HTML element, so for example:

<div class="row col-2 mb-5">

How can I do that in GraphJS Studio?

[artf]

Thanks @Doogiemuc can you elaborate more on your issue?
I'm not even sure if you're referring to the GrapesJS framework (as a dev) or Studio (as an end-user)

[Doogiemuc]

Hello! (sorry for the late reply)
I am talking about GraphJS Studio. https://app.grapesjs.com/studio
When editing an elment, then the Style editor looks like this:

In this example text-main-content is a CSS class. Now I want to add another CSS class to this element. But in addition to the already added class. But when I click the plus button in studio style editor, then it adds a selector for both classes. Combined:

This is a CSS compound selector. This is not would you would normally want as a web developer. Here the CSS selector .text-main-content.feature-item only matches items that have both classes. What I would want is .text-main-content .feature-item (mind the space in between the two class names!) That applies both classes individually.

How can I add two seperate classes to one element.

For example:

CSS:

.red { color: red }

.large-text { font-size: 5rem }

HTML
<p class="red large-text">Some very large and(!) red text</p>

How do I archive this in Studio?

[mosh-tudor]

@Doogiemuc
You can achieve this by disabling the classes you don't want to add the current styles to:

But I'm not going to lie, the old logic was much simpler and more convenient.

[artf]

That's correct, thanks @mosh-tudor
What do you mean by " the old logic was much simpler and more convenient"? The logic is the same, the only difference with the core UI is that you have "checkboxes" to switch selectors, are you referring to that difference?