▼
Streaming live at 10am (PST)

Same class for different element types and inheritance

#1

I can't figure out how to achieve that behavior when I add the same classname to different html elements (h2, p, img) I can tune their settings separately, because they are technically different leaves of the DOM tree, but they're somehow semantically belong to each other.

as an example I'd like to get something like this in plain old CSS:

    h2 offer {
       align: center;
    }
    
    img offer {
       align: left;
    }
    
    p offer {
       align: right;
    }

Is it possible? Or should I just forget it because nowdays it's not how it should be done and this kind of pattern is a bit outdated? (haven't written CSS in a while)

I've watched the tutorials but haven't came across such a thing.

Thanks.

#2

Hi @pingween, I'm a little confused. Are you talking about the css selector .class1 .class2 { } which pretty much translates "when .class2 is inside .class1, make it have these properties". I don't think that's what you're talking about because you can't put anything inside of an <img> tag. So I'm assuming you're talking about being able to use the class "offer" in many places. You totally can, but not for "tags". You can create a class and nest another class in it. So it would be something like:

.class1.offer {
   align: right;
}

 .class2.offer {
   align: left;
}

But I don't know what you're really asking. Can you elaborate with an example of what you want to build? Thanks!

#3

Sorry for that, my CSS is a bit rusty, and I haven't looked up any reference (shame on my lazyness...)

Actually the result I'd like to get is this:

HTML

<div class="w-container offer">
    <h2 class="offer">Nice heading</h2>
    <img src="nice_pic.jpg" class="offer" />
    <p class="offer">This is some paragraph text</p>
</div>

CSS

h2.offer {
   text-align: center;
}

img.offer {
   text-align: left;
}

p.offer {
   text-align: right;
}

My problem is that if I have a section or container with the class offer, and I add some other elements (an h2, an img and a p) inside it and I assign them the class offer respectively (because they belong to that section logically) then I get all the settings applied for them set for the offer class. Which is basically a good thing considering that it should cascade down.

But if I'd like to make the header aligned in the center and the paragraph justified, than I can't do that without modifying every element with the same class, because the class offer affects every kind of them.

That might be a solution that I name my classes offer-container, offer-heading, offer-image, offer-paragraph, but I feel that pretty redundant, that's what elements are for.

I think I might need to rethink my naming conventions. smile

#4

I understand now. For now the only solution is to create separate classes like "offer-container", "offer-heading", etc. But the correct solution would be to create a selector like this:

.offer h2 {
  property:value;
}

This means "any h2 inside of an offer class should have this property+value". We are planning on adding this functionality to the UI so that you don't have to create all these extra classes - but instead you can just say "I want all my Paragraphs in the .offer class to be like this" and "I want all my Headings in my .offer class to be like this". So anywhere you have a div with a class "offer" you can drop a P or an H2 and they will behave like you stated.

We'll let you know when that's up and running. smile

#5

Thank you!

In the end, after fiddling around with webflow I figured out as well that my core problem was the same which you mentioned: I can not customize element styles only for a section, every change affects all the other elements (eg. ALL H2 Headings on the interface) unless I don't specify a new, distinguishing class for every element.

I love webflow, and looking forward for the new features, in the meantime I'll use the workaround you suggested. Keep up the good work!

#6

any news on that issue? i love to work with webflow, but its kind of annoying to litter around with classes just to define for example the color of a p, when its a child of a div, that already has a class.

in other words:
can i address "div.class1 p" without setting up "div.class1 p.class2"?

#7

We started working on this feature. It's still in the works, but we'll let you know when it's ready to be used.

Update: We decided not to implement nested styles for now.

#8

Any news on this? It is very important to inherit this functionality

closed #9