I would love to be able to use nested CSS classes, like in the real world. Objects should inherit classes on parent objects in the DOM, and I should be able to target those.
For example, div.sponsors > img has a style. Adding .large to the sponsors container allows us to change the appearance of that nested image. div.sponsors.large > img
I have tried adding custom code to the settings for the site. However, this custom code doesn’t seem to load in the Designer, which is confusing.
Then I accidentally stumbled on this, when styling the contents of a Rich Text object:
This is perfect and very exciting. However — is it only accessible when styling objects inside the rich text editor?
Targeting user-created classes via custom code is fairly straight forward: .general-richt-text.combo would target the class “combo” inside of “general-rich-text”.
I’m not exactly sure if Webflow’s pre-existing classes (purple ones), like the “All Block Quotes”, are selectable if no changes were made. Their name might be a bit weird.
The view you encountered on your image is accessible when clicking on the “Inheriting X Selectors” when having any element selected which has settings passed down from more than one class.
That’s correct as webflow does not support creating descendant selectors without using custom code to so. If you do, you will only see changes in the designer if your styles were in an embed. Oh the power!
I don’t see that “Inheriting X Selectors” option anywhere but on rich text content. Unless I’m missing something, I don’t think it is available on other objects!
Aha, this is a good solution. I added CSS to a custom code embed to within the symbol, and that worked. It seems janky — CSS scattered throughout a project, instead of unified in one place — but it works. Thank you.
