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:
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.
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:
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.
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.
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!
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”?