Relative styling parents

I think it would be useful to add the ability to add a parent selector inside relative styling. For example, if I have a .dark-mode class, or something similar, on the body tag, then the relative styles below would do something.

Right now, I think we can select the body tag separately and do this with relative styles, but it would be cool to be able to add it on a child element.

Example:
This is what we can do now:
.current-selector > .child-element

What would be cool is to be able to add a parent:
.parent .current-selector > .child-element

Hope this makes sense

3 Likes

Excellent idea!
This would solve a couple of issues at once, at least for me.
Happy to elaborate if anyone cares :face_with_peeking_eye:

Oh! Having the rules go either way is a superb idea that hadn’t crossed my mind in this way.
Love it and will definitely look into adding this.

Cheers,

1 Like

Was focused on the live stream, so will give more details now.
I have 3 different things on my list, but in addition, the case @msguerra74 described is also only achievable with Custom CSS and I also faced limitations in this kind of scenario.

  • Would solve this issue: Modal - Relative Styling

  • Would solve this issue: Relative Styling - Folders

  • Let’s say you toggle a class with the help of the interactions feature and assign this class to Element A.
    This will trigger a style change to Element B. the Relative Styling would look like .element-a.toggled-class .element-b
    I now have to manage the style of Element B from 2 different areas. Default styling from the Element B area, but with the class toggled, I need to manage styling of Element B from Element A’s area.

I hope that makes sense.

Yes, I ran into this when implementing dark mode on my site, where I needed to target the “dark-mode” class higher up the DOM in order to restyle certain elements below. I used custom CSS for now, which is no problem, but it’s nice to use the visual tools so most of the styles are together in the elements where they reside.

1 Like

:100:

Very underestimated point.

1 Like