CSS based on parent class

Community resources Getting started
1

Hi. Coming to this from a mobile first BEM background can anyone advise me how to style a child element based on the parent class. I like my code to be as clean as possible and it looks like Webflow needs a lot of classes that aren’t really required.
i.e.
How to style a

color as white depending on the outer card class.

i.e.

.card-black { backgound-color: #000; }
.card-black h3 { color: #fff; }

<div class="card card-black">
<h3>This should be white with no class required</h3>
</div>
2

Three ways;

  1. Make h3 inherit the color, and let the parent define it. BODY would set the default text color, and card-black would override it to white.

  2. Code embed CSS. This gives you the greatest control, and if you do it using an HTML embed, you will see the <style> directly in the designer. Put it in your site-wide nav symbol if you want it on all pages.

  3. Rich text hack. Not worth it really, but one of the few elements which can apply styles in to e.g. .x .y selector arrangements is the rich text element. Create an RTE and give it a class of card-black. Then create H3 inside of it, and style that so that it’s “only within RTE card-black”. You’ll find that Webflow generates a CSS selector of .card-black h3, which will apply to any other elements in that arrangement as well.

3

Why mobile first? We could end up with instagram.

4

Keeps code leaner and cleaner. Only loads smallest images for mobile and and less chance of conflict in media queries.

5

Thanks. I tried inherit but it isn’t working for me - I get a red error outline when I input inherit into color field.

6

Share your project readonly link and make a vid if you need some help. I can’t see what you’re doing from here.

7

Thank @memetican. I found what I was after. The only option in the editor for nested css is for use with the Rich Text widget. With a paid site I can edit the css manually. Thanks for your offer.