Ability to style CSS Combinators: combo classes, pseudo classes, nested classes

When I add a css class and then add another css class on top of it, the resulting css rule in the code is a compound rule. Most of the time this is fine, but there are times I need the two rules to be separate. Please expand on the css layering, by giving us granular options for creating single-class or compound rules, and maybe even some complex bits like parent/sibling selectors, or ":" suffix rules.

Mainly, if I've got two elements, and one's got classes A->B->D while the other's got classes A->C->D, I don't want to have to define D twice, like I do now.

  • Brendan Keyworth
  • Sep 20 2017
  • Jan 19, 2021

    Admin response

    Hi all - jumping in with an update here. While we’re not planning specifically to build support for these types of CSS targeting rules, we do have plans to build a lot more power into symbols that will enable you to create more reusable, manageable component-based design systems. Will share more updates on that as we have them!

  • Alex Bass commented
    24 Mar 01:52am

    This please, I know I'm making SUCH a mess with CSS classes because of how Webflow handles it by default 😩

  • Corgi Bradbury commented
    6 May, 2022 02:27pm

    Adding my vote. Symbols have nothing to do with this---I want to be able to target all elements of a specific kind inside a given class. The fact this functionality already exists within Webflow (as noted below by Michael David) but can only be used if you hack around it is nothing short of bizarre.

    Reposting the link Michael shared below for visibility:

    https://forum.webflow.com/t/how-to-define-css-descendant-selectors-in-webflow/135561

  • Parcion commented
    31 Dec, 2021 10:14pm

    Please give us the ability to more easily manage and work with our css. This has nothing to do with symbols so the admin response is not applicable. We need the ability to be able to convert combo classes into a new singular class, and the ability to use more global classes. I like the combo class idea but it is running wild and needs to be tamed LOL.

  • Lonnie Kuhn commented
    25 Nov, 2021 10:31am

    In CSS, pattern matching rules determine which style rules apply to elements in the ... CSS gives so much power to the "class" attribute, that authors could

  • Derek Adams commented
    18 Oct, 2021 09:45am

    the column combinator; the :drop() pseudo-class ... querySelectorAll() function defined in [DOM] or the selector of a CSS style rule.

  • Mike Escoffery commented
    19 Jul, 2021 06:47pm

    What is with the Admin Response?

    Did anybody ask for more power in symbols? I never use symbols, they have no use on small projects. But the basics of how CSS works I use in Every Single project.

  • Nicole Cmar commented
    27 Feb, 2021 09:57am

    Pleeassse Webflow, give us this! I'm still getting used to Webflow and have some SCSS knowledge, and the combo classes make no sense. Sometimes I search for several minutes just to figure out the inheritance, meanwhile if I had a global class, it would be so easy to edit. Symbols don't help on this part because there's still so so many classes. Improvements are definitely needed!

  • Tom Rauscher commented
    14 Feb, 2021 02:29am

    I'm disappointed by this response. The inheritance dropdown that let's you switch between combo classes and device rules is like... 95% of the functionality here...

    Why not just let us select the specific class in this dropdown?

    In my screenshot I've got a Column class and a combo class for a Column with padding. If I could just select the Padding class in this dropdown I would literally have a utility class I could use everywhere for even padding without even thinking about it. It would speed us up so much.

  • Michael David commented
    28 Jan, 2021 07:21am

    There is already the ability to create descendant selectors in the rich text element, so the UI and functionality exists. This functionality should be expanded so that it can be applied anywhere – so that any class can be applied on the condition of it being nested in the selected parent element.

    You can even hack the RTE nested selector functionality to do this elsewhere, as described here: https://forum.webflow.com/t/how-to-define-css-descendant-selectors-in-webflow/135561

    So, it shouldn't be a stretch at this point to implement this very much needed feature that every CSS-aware designer is desparately asking for.

  • Giles Holland commented
    21 Jan, 2021 07:30pm

    In response to the admin response of 19 Jan 2021: That isn't going to help. Symbols and utility classes are fundamentally different things. Nothing you can do to expand symbols is going to cover this gap. I have never seen a company ignore user feedback and engender as much user frustration as Webflow does. Whether it's critical feature requests voted by thousands of users, or countless bugs reported years ago. You're alive for now because there's nothing nearly as good out there, but it won't stay that way forever. This is an unsustainable philosophy.

  • Tom Binroth commented
    21 Jan, 2021 10:06am

    I don't know why Webflow ignores this feature request. Child selectors are an essential part in CSS styling. I need to style paragraphs and headlines in multiple sections. Styling a lot of text is a pain and time consuming process in Webflow.

    Symbols and Combo classes do not solved this issue at all. It will increase the CSS file. We still have create new classes and apply them one by one.

    Hopefully Child Selector will be supported at some point. The current state is a huge disappoiment.

  • Alexander Wong commented
    19 Jan, 2021 04:13pm

    @Admin Response

    Symbols are completely another use case, the reason we need at least "Pseudo Classes" styling is to help out how a page is styled. Especially important for us who are agencies who build sites for our clients. It seems like your Product team is too disconnected from your actual paying user's needs.

  • Mark Drake commented
    28 Dec, 2020 04:15pm

    I have a list. I give the UL element a class. I want to style every LI child element with this relationship - I shouldn't need to create another class and assign it to every child element (or expect my client to always remember to assign the class).

  • Mandy Hopp commented
    23 Sep, 2020 08:48pm

    This is critical in making clean, reusable code. The way it's set up right now is incredibly hard to keep track of.

  • Tom Binroth commented
    13 Aug, 2020 08:18pm

    I am really missing support for bested "children of" styles. Any progress?

  • Jullie Verma commented
    10 Aug, 2020 08:33pm

    Thanks for any other informative blog. Where else could I be getting that type of info written in such an ideal manner?

    I have a project that I’m simply now working on It.

    Jullie Verma | Reeta Malik Website

  • Johannes Elze commented
    9 Jun, 2020 10:05am

    I just can't believe that this feature is still not implemented! It has been requested since 2014! It's such a crucial and very basic CSS operation. Please, do implement it finally!

  • Jake Kushner commented
    3 Jun, 2020 06:46am

    +1 to compound rules e.g. defining .block inside .div1 should be different (if desired) than .block inside .div2.

    Webflow should let you put in the name of the parent's class when typing out the new class name you're defining to indicate this is a chained/child of class.

  • Giles Holland commented
    22 Apr, 2020 09:48pm

    Edit to my post below: Important to note that this isn't exactly the feature you're talking about. Technically when you apply a global combo class, you create a new (but separate) combo class for that element, one that has the same name as the global class and inherits all its values from it. The relationship only flows one way, though--if you change properties at the combo instance, the changes won't propagate back to the global class or to any other combo instances of that global class elsewhere.

    The interface also won't let you get at the global instance from a combo instance.

    So, the way to work it is to keep an element where it's applied as just a global (not combo) class on a stylesheet page, and always make any changes there. Those changes will flow to all your combo instances, as expected. This is pretty much how you'd want to organize additive classes anyway, so it's not a huge problem as long as you're being careful.

    One other little note: Changing the style name doesn't propagate even from a global instance (I would call that a bug, though).

    So basically it's what you're looking for... except a bit fragile.

  • Giles Holland commented
    22 Apr, 2020 03:47pm

    As Mohit described below, I believe it's already possible to do something like this in Webflow. It's just hard to spot in the interface. The interface also currently seems a little buggy in a way that obscures the feature even more--hopefully that will change.

    For any element where you already have a class applied, click in the Selector box and begin typing the name of another class that already exists. You'll see two options appear: "New Combo Class" creates a new compound combo class with the name you've typed, as we already know. But beneath that is "Global Combo Classes", which lists all your other existing classes matching the beginning of the name you typed. If you pick any of them, it will apply them in an additive/atomistic way, not in a compound way. You can do this multiple times to apply multiple atomistic classes.

    The bug is that if you type the whole name of an existing class, that list of Global Combo Classes disappears and the only remaining option is to create a new compound combo class. You have to only type part of the name and then select it from a list. Currently at least--hopefully they fix that.

    This feature is documented in the page on Combo Classes, though they use different terminology. They say they don't recommend it, which in this case I just take to mean use these reachy classes carefully: https://university.webflow.com/article/combo-classes

    vincent also explains more on how global combo classes work here: https://forum.webflow.com/t/global-classes-used-as-combo-classes/63833/2

  • Load older comments
  • +2500