CSS Sibling Combinators

Design help General
1

Is there a way to use CSS sibling combinators in Webflow? I am trying to do the equivalent of something like this:

.overlap-section {
    margin-bottom: -44px;
}
.overlap-section + section {
   padding-top: 120px;
}

where the section right below a section with a negative bottom margin will have extra padding on top, to account for the overlapping elements.

Is there a way to do this in webflow? If not, what’s the best way to get the same effect?

Thanks,

Jill

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

Yes and no.

No Webflow doesn’t support those selectors yet.

But yes you can define them in custom code and see the effects right in the designer without even having to activate Preview.

In order to do that, place a Custom code element anywhere on the page (in the navbar symbol will make the code active on all page, for example), and type your css code in it You can target already existing classes that you continue to style in Webflow.

Another way to target the first .section after a .overlap-section element, without adding extra classes? I don’t see one.

3

Is this the “Embed” element? If I’m not mistaken this is only available to pro users. Were you referring to a different element that I’m not seeing? (I’m new to Webflow… very good chance I would miss something…)

4

You’re right it’s the Embed component. I keep forgetting that it’s not available to non pro users. :confused: