How to style nested CSS classes

Design help Layout & Design
1

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?

2

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

3

@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
4

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

5

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.

6

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”.

This information is incorrect. Webflow does not support nested css classes in the GUI.

.general-richt-text.combo (sp) is not nested. It does not target the class combo inside of general-richt-text.

It targets elements with the class attribute class="general-richt-text combo"

–

To be nested, the classname must have a space in it, like .general-richt-text .combo.

This targets an element with classname combo that is a child of a parent element with classname general-richt-text

7

Hi Doug. Where are you applying these class names so that this works? If I apply the class name of .general-richt-text .combo to an object in the GUI, it uses that full name. general-richt-text-combo is what gets rendered.

8

Must be in an Embed element, either a standalone Embed on the canvas or an Embed element within a rich text block.

You can create any CSS you want that way;

<style>
.general-rich-text .combo {
  background-color: yellow; 
}
</style>

That said, your use case is somewhat mysterious-

  • Rich text elements already have a means to style internal elements by type ( p, h1, blockquote, etc ). This is especially useful for CMS-bound richtext elements like blogs.
  • Non-CMS-bound rich text element can have classes assigned directly to individual elements within the rich text block, which gives you styling freedom in the designer.
9

OK, great. Yes, that’s what I thought — nested classes can be created using custom embedded code.

(I was using those specific class names only because it was a direct response to the previous comment, and the examples used there).

1 Like