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
  • Tyler Jensen commented
    January 15, 2018 17:52

    This feature would really help with designing with Webflow!

  • Kyle Craven commented
    April 5, 2018 14:48

    I wish we could style children of certain classes. For e.g. .main-navigation > li, rather than having to add a class on the li itself

  • Anna Timm commented
    April 10, 2018 09:20

    Yes. I like to use CSS in the "object oriented" style decribed here. And it's just barely possible in webflow to define "Button .red .greenBorder" and later reuse the border like "Image .greenBorder" in a simple way (as far as I know). This would also allows for better maintainance since one can simply change .greenBorder and it changes it on the Button and Image the same way...

    As a work around to the "A->B->D to A->C->D Problem" I make an empty throwaway-div with a "D" style, style it, and THEN add that "D" style to the elements. But that's a workflow that is needlessly complicated and prone to errors...

     

    This ties in to a lot of other ideas here like editing Styles/Classes/CSS directly from the Style Manager or re-ordering the Styles in the Style Manager or simply to copy/duplicating styles a bit more easily.

  • Luke Grayson commented
    April 19, 2018 05:02

    I justed started using WebFlow having come from a hand-coding background and I'm in disbelief that this feature doesn't exist.

    There is some really cool stuff in WebFlow, but the inability to style based on nested selectors is killing me. It may even end be a deal-breaker for me as the verbose HTML and CSS generated by having to give every single element a class or combination of classes is crazy.

  • Salatiel Queiroz commented
    May 22, 2018 12:37

    +1 :before :after

  • Scott haines commented
    June 20, 2018 15:54

    I think the biggest issue with this problem is not being able to change class states once they are combo classed. I usually have to create a hidden version of the original class by itself. It's annoying.

  • Fernando Lins commented
    June 29, 2018 04:59

    Need this too! Please!

  • Henry Gillis commented
    June 29, 2018 12:06

    Yes please! 
    It would be amazing if I could easily set up "global combo classes" and having control over them. For example If I have ".p .p--large .text--centered" I want to be able to use "text--centered" on all h1-h6.
     
    I would use global combo classes for:
    - Text Alignment
    - Text Color
    - Background Color
    - Shadows
    - Any other type of simple styling

  • Joe Million commented
    July 4, 2018 17:13

    This is a pretty major feature.

  • Alexander Wong commented
    July 23, 2018 07:30

    Even if we don't get the rest, at least allow us the ability to add pseudo classes first.

  • Drew Palko commented
    July 25, 2018 13:45

    For all who are trying to figure out how to create a "global class" (as Webflow calls it) in webflow (class 'D' in the OP's example) you simply have to create an element with no classes (a fresh 'div') and the class you want, and style it the way you want (text-align: center) then you can delete that element and apply that class to any element that you want to have that style, whether it is a heading, p, button... with any other class!

    You can store these primitive elements in a hidden page so that when you clean your styles, they don't get deleted if they're unused. 

    As for pseudo classes, and nested class targeting (any .button inside of a .form - similar to how rich text fields work), those would definitely be helpful.

  • Eryc Silva commented
    August 18, 2018 14:10

    Please implement this ASAP!

    Something I've been struggling with is styling elements according to whether the parent has a class or not.

    A practical example of that would be a custom tab menu element: I want to change the size and color of each element inside the "tab-link".

    • In CSS, what you can do is: add an "active" class to the parent element (.tab-link.active) and style children like this: .tab-link.active .child { ... }
    • In Webflow, you have to use a workaround which is quite the hassle: use "active" classes to each element you want to make a change + use custom JavaScript to add/remove these classes for each individual element when a click is triggered.
  • Sjur Grønningsæter commented
    August 25, 2018 13:39

    Trying to use the excellent grid templet from Kevin Houle was a challenge because of how Webflow handles nested classes. I really like the idea of defining classes to control how many columns my divs should cover in this flexbox grid. Say I want a div to be 8 columns on desktop, 6 columns on tablet and 12 columns on mobile. I would logically assume that I could set up “global classes” for this (col-8, col-m-6 and col-xs-12) and use them independently of each other. But with Webflow's current combo class nesting, this is just messy. Btw, the template works, but the combo classes are not autocompleted as you type. You need to write it correct to apply the classes. And as you know it will result in a combo class tree structure for every variation of layout you set up. Not very clean and reusable, I’m looking at you Webflow ;-)

  • Rijk van Wel commented
    September 11, 2018 11:19
  • Derek Long commented
    September 18, 2018 14:49

    Also vote for pseudo classes here: https://wishlist.webflow.com/ideas/WEBFLOW-I-6

  • Christopher Travers commented
    September 20, 2018 14:20

    Bump. Could use this!