How to style nested CSS classes

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:

Screen Shot 2022-06-14 at 3.21.22 PM

This is perfect and very exciting. However — is it only accessible when styling objects inside the rich text editor?

Hi @zappa,

Webflow supports nested CSS classes and it’s possible to select them.

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.

Did this answer all of your questions?

Cheers
Leon

@zappa

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!

2 Likes

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!

image

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.