I’m having trouble targeting elements inside other elements with a single style. It seems that every element needs to have it’s own style.
For example, if I was writing CSS by hand and I wanted to target all h1 headings inside a div with a class name on it, I would do this:
.class-name h1 {}
I can’t figure out how to do this in Webflow, however. It seems that I have to give separate styles to both elements. This isn’t a big deal if I only had to do it a couple times but with a lot of styles and pages, my styles names are getting crazy long and my pages with multiple similar elements have too many classes applied. I end up with styles like:
event-page-main-area
event-page-main-area-heading-one
event-page-main-area-p
event-page-main-area-image
event-page-main-area-image-last (no structural pseudo-classes without custom code)
Then every single one of those elements needs to have those classes applied each time they appear.
So if I have a page with 30 images on it, each one seems to need a class applied to it, rather than just:
.class-name img {}
Am I missing something? Is there a way to do this so each element doesn’t need the same class over and over again and just inherits it from a single style?
Hi @tubes, the ability to target element styles within other elements is not part of the designer yet, but it is on our list of things to update in Webflow.
When we have more information about this, we will make a notice about it. If you want to style the IMG tag for example, you can do it, but you need to use some custom CSS entered in the HEAD panel of your Custom Code section of Site Settings. There you can put in an override such as:
<style>
.class-name img {
... Your css properties for the IMG tag go here. Will affect all images that are within .class-name, wherever .class-name appears in your site
}
</style>
I am hoping you are closer to adding this ability. Tubes is right on, I end up making all kinds of extra classes to achieve what would be simpler by targeting all img or h2 within another div class X. So when I turn over the exported code to a developer, he is getting a lot of extra cruft to clean up and starts muttering under his breath about designers. It also makes it really hard to maintain style consistencies across multiple pages. I get that Webflow is mostly for one-page sites, but this limitation is troublesome.
While adding this in the custom css panel is a workaround, my understanding is, you don’t actually see those styles take effect in design view, only when you Publish or export, correct? Plus, it’s sort of contradicts the premise of not needing to code.
I just jumped on board and this feature was the first I was missing.
Hope it will be released soon.
Right now I notice myself ‘cluttering’ elements with arbitrary style names as selector, while CSS allows you to simply select elements based on their parent elements.
The result?
For me as a designer my style list gets messy. On larger (especially multi page projects) this becomes very hard to maintain. As a result I give up to keep it tidy with more and more arbitrary classes as a result.
The developers I work with complain they need to rewrite the code to clean it up, spending a lot of extra time.
I’m just wondering if this feature is in development yet. I was trying to create nested styles using this tutorial: http://help.webflow.com/faq/how-to-nest-styles-in-webflow
However, I was informed by support that nested styles are only available in Rich Text fields.
Wondering why that is—like many others have said in this thread, nested selectors would do a lot to keep the stylesheet Lean, mean, and maintainable.
Hi @Mark_Suarez, thanks a lot for the post. Sorry for the late reply. I wanted to give you a quick update, the feature request is still on our wish list, but I do not have an ETA yet for this or development status to report.
As soon as there is an update for this, the wish list will be updated (just like other wish list feature requests that were implemented Thanks for your patience, I know that it can be hard to wait :-/
I’d just like to add my +1 to this request to keep it at the top of the wishlist. Seems like one of few big gaps from my couple of days using webflow rather than handcoding!
Thanks for your patience, I know that it can be hard to wait :-/