SOLVED: 'root' in custom CSS element settings doesn't always target the element ID

Bugs
1

I’m unsure if this is a bug, or by design, but the behaviour doesn’t match the documentation.

Currently, Bricks (1.4), if we have a class selected on the element for styling, and then go to custom CSS to add some CSS like so…

root {
background: red;
}

From what it says in the docs, the ‘root’ always refers to the element ID, however it’s output in the CSS with whichever class is currently selected (or ID if that is selected).

So on the front end we may get…

.my-class {
background: red;
}

if ‘my-class’ was currently selected in the dropdown.

I’m not sure if the documentation is incorrect or if this a bug.

See images for example where the class ‘benefit’ is selected on the element as I typed in the CSS.

Screen Shot 2022-05-25 at 4.42.25 pm
Screen Shot 2022-05-25 at 4.42.25 pm1277×1986 193 KB

Screen Shot 2022-05-25 at 4.42.51 pm
Screen Shot 2022-05-25 at 4.42.51 pm1089×495 78.6 KB

(i’m hoping just the docs are incorrect and this is intentional, as it’s quite a useful way to quickly add custom CSS to classes from the UI)

2

Hi,
It looks good to me.

The documentation paragraph you mention is about element specific custom CSS, so indeed, in this case, root targets the element ID.

But as here you’re editing a class, root should target the class name and not the element’s ID.

3

I believe with ‘element-specific’ this is referring to it being in the element settings, as opposed to being page-specific, which would be in the page settings.

But i think you’re right that it’s supposed to work that way, I think it just needs rewording in the docs to make it clear it’s going to be changing to whichever class or ID that is currently selected. (docs dated November, 2021 so maybe before class styling was added)

2 Likes
4

You’re right, doc should mention class editing as well :slight_smile:

5

Hey David,
Thanks for the hint! We will add the class to the documentation. Otherwise, it is thought exactly as you have already discussed :slight_smile:

Best regards,
timmse