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 05, 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

  • Scottie J. 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 04, 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 da 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

  • Atlanta Ventures commented
    September 20, 2018 14:20

    Bump. Could use this!

  • Timothy Johnson commented
    December 06, 2018 22:58

    Can't believe this isn't implemented yet. It's such a basic concept. They even have a nested selector for rich text!

  • Agus Putro commented
    14 Jan 06:07
  • Saxon Fletcher commented
    08 Feb 01:01

    This was the one big disappointment for me as a new Webflow user and as someone who has used utility based CSS frameworks like Tachyons before. 

    I'm sure you see this a lot but I've created a system of global styles by creating temporary elements, applying styles, then removing the element. Its frustrating having to do this every time I need to create a style that is used elsewhere. 

  • Sjur Grønningsæter commented
    04 Apr 06:22

    Disclaimer: I’m writing this as a UX designer with limited knowledge of CSS.

    Copying my post from the forum to this wish to add my vote (link to original post).

    Coming from the design space (Sketch and Figma) I’m used to thinking design implementation in terms of style guides. That means approaching design modular with reusable parts. I would typically define spacing sizes, background colors, border colors, border widths, drop shadows, etc. I use these styles and symbols in different combinations to create components and templates (the atomic design principles).

    Moving to Webflow I would expect the possibility to transfer the same logic and use global classes that represent my styles/atoms and use the global classes in different combinations to create the design I want. But Webflow seems to be against this type of organization. I read in the forum that you don’t “believe” in combining global classes. You think that it’s dangerous to have one class affect multiple elements in the design :exploding_head: You instead implemented the concept of combo classes. Combo classes, I can tell you, is not a good way to work for people that are used to work in Sketch/Figma with styles/atoms. This is absolutely not good design system practice.

    I hope that you decide to support combining global classes for us design system people. It’s a must-have. I don’t want you to remove the combo class pattern, just extend and improve it. I should be able to decide when to use a combo class or a shared global class. I know I can hack it today, which is a terrible pattern, and that is what I want you to fix – make right.

  • John Columbo commented
    16 Apr 02:06

    I like the combo class concept, but like mentioned already, there are many times where I want to add a stand-alone class to an element without it being a part of a combo class. 

    Maybe a more straight-forward solution would be to simply have two selector input boxes, one for standalone classes and one for combo classes. 

  • Oliver Johnson commented
    10 May 09:21

    I like the combo class idea, yet like referenced as of now, there are commonly where I need to add an independent class to a component without it being a piece of a combo class. Know more at Brother printer in error state.

  • José Ernesto Rodríguez commented
    17 May 11:13

    💯

  • James Vreeken commented
    31 May 19:31

    I would add to this to allow custom naming of classes...

    I have worked with a lot of codebases that ignore the fact that it is a best practice to name css classes in all lowercase and not camelCase classes... currently webflow converts all classnames to lowercase...

    One way webflow could implement this quickly is to allow custom class names when typing them by flagging the system that you intend to write a custom class...

    For example if I wrote a classname like this currently:
    classNameA > classNameB
    webflow converts this to:
    .classnamea--classnameb

    My suggestion to solve this is to allow custom classes by starting the classname with a backtick ` so If I wrote:
    `classNameA > classNameB
    Webflow would convert this to:
    .classNameA>.classNameB

    Webflow would need to be smart enough and figure out all the edge cases and valid css class naming... instead of replacing spaces with hyphens, a space would indicate a descendant selector etc unless the space is followed by a > + or ~ :

    • descendant selector (space)
    • child selector (>)
    • adjacent sibling selector (+)
    • general sibling selector (~)

    There would need to be an affordance in the UI that this is a custom class name or something.

    Ideally support inside webflow to allow all css selectors:

    Selector Example Example description
    .class .intro Selects all elements with class="intro"
    #id #firstname Selects the element with id="firstname"
    * * Selects all elements
    element p Selects all <p> elements
    element,element div, p Selects all <div> elements and all <p> elements
    element element div p Selects all <p> elements inside <div> elements
    element>element div > p Selects all <p> elements where the parent is a <div> element
    element+element div + p Selects all <p> elements that are placed immediately after <div> elements
    element1~element2 p ~ ul Selects every <ul> element that are preceded by a <p> element
    [attribute] [target] Selects all elements with a target attribute
    [attribute=value] [target=_blank] Selects all elements with target="_blank"
    [attribute~=value] [title~=flower] Selects all elements with a title attribute containing the word "flower"
    [attribute|=value] [lang|=en] Selects all elements with a lang attribute value starting with "en"
    [attribute^=value] a[href^="https"] Selects every <a> element whose href attribute value begins with "https"
    [attribute$=value] a[href$=".pdf"] Selects every <a> element whose href attribute value ends with ".pdf"
    [attribute*=value] a[href*="w3schools"] Selects every <a> element whose href attribute value contains the substring "w3schools"
    :active a:active Selects the active link
    ::after p::after Insert something after the content of each <p> element
    ::before p::before Insert something before the content of each <p> element
    :checked input:checked Selects every checked <input> element
    :default input:default Selects the default <input> element
    :disabled input:disabled Selects every disabled <input> element
    :empty p:empty Selects every <p> element that has no children (including text nodes)
    :enabled input:enabled Selects every enabled <input> element
    :first-child p:first-child Selects every <p> element that is the first child of its parent
    ::first-letter p::first-letter Selects the first letter of every <p> element
    ::first-line p::first-line Selects the first line of every <p> element
    :first-of-type p:first-of-type Selects every <p> element that is the first <p> element of its parent
    :focus input:focus Selects the input element which has focus
    :hover a:hover Selects links on mouse over
    :in-range input:in-range Selects input elements with a value within a specified range
    :indeterminate input:indeterminate Selects input elements that are in an indeterminate state
    :invalid input:invalid Selects all input elements with an invalid value
    :lang(language) p:lang(it) Selects every <p> element with a lang attribute equal to "it" (Italian)
    :last-child p:last-child Selects every <p> element that is the last child of its parent
    :last-of-type p:last-of-type Selects every <p> element that is the last <p> element of its parent
    :link a:link Selects all unvisited links
    :not(selector) :not(p) Selects every element that is not a <p> element
    :nth-child(n) p:nth-child(2) Selects every <p> element that is the second child of its parent
    :nth-last-child(n) p:nth-last-child(2) Selects every <p> element that is the second child of its parent, counting from the last child
    :nth-last-of-type(n) p:nth-last-of-type(2) Selects every <p> element that is the second <p> element of its parent, counting from the last child
    :nth-of-type(n) p:nth-of-type(2) Selects every <p> element that is the second <p> element of its parent
    :only-of-type p:only-of-type Selects every <p> element that is the only <p> element of its parent
    :only-child p:only-child Selects every <p> element that is the only child of its parent
    :optional input:optional Selects input elements with no "required" attribute
    :out-of-range input:out-of-range Selects input elements with a value outside a specified range
    ::placeholder input::placeholder Selects input elements with placeholder text
    :read-only input:read-only Selects input elements with the "readonly" attribute specified
    :read-write input:read-write Selects input elements with the "readonly" attribute NOT specified
    :required input:required Selects input elements with the "required" attribute specified
    :root :root Selects the document's root element
    ::selection ::selection Selects the portion of an element that is selected by a user
    :target #news:target Selects the current active #news element (clicked on a URL containing that anchor name)
    :valid input:valid Selects all input elements with a valid value
    :visited a:visited Selects all visited links


    Just an idea because I have been wanting this forever.

  • Kate Winfield commented
    11 Jun 07:33

    Hello, it is a great post. It's been such a wonderful experience while reading your blog.
    If facing any problem related to a printer please visit Brother Printer not activated error code 30
    and call us on toll-free no. USA: +1-888-633-7151; UK: +44-808-164-5280  for any technical support assistance.

  • Gregor Favre commented
    22 Jun 11:22

    This was once in the playground in 2014: "when located in" - would love to have this in the designer.

  • Henry Gillis commented
    12 Jul 08:46

    Yes! This would solve so many headaches and speed up our workflow tremendously. Also makes it MUCH easier to develop design systems with reusable components.

  • Roger David commented
    17 Jul 11:38

    Thanks for sharing this valuable content with us this work is appreciable and I have bookmarked your website Visit to setup connect canon mx490 printer to wifi

  • Jennifer Arzt commented
    30 Jul 18:49

    Yes please! This will help make the canvas a friendly tool to design and build in!

  • Mohit Sharma commented
    08 Aug 07:57

    It's already possible, and I am doing it on my project. You can use combo classes without having a compound rule. The trick is to start fresh with each class, I am using it in this way:

    For styling headings

    1. Drop the heading element and create a class called “Headings”, and style the font and default color. So, the headings class only hold the rules for the font and default text color.
    2. Now, drop a fresh heading element and apply a new class to it called “Text Color”. Here, I change the text color to something else than the default, and nothing else.

    Now, you can use the “Text Color” class with any heading or paragraph. Because it's a separate class now, it will only change the text color and won't work as a compound class.

     

    I apply the same trick to margins as well to create a vertical rhythm. I drop a div element, give it a class called ”Bottom Space 20”, and apply a 20 px bottom margin to it. Now, I can apply this class to anything, and it will have a 20 px bottom margin. 

     

    The downside of using it is that you apply a lot of classes on an element, and if you really want to add a compound rule, well you get a long ass list of the compound classes. 

     

  • Joshua Butts commented
    26 Aug 14:00

    This is a pretty major oversight. I'm a designer and a developer, and this type of granular control is VITAL to creating a clean coded website that is built for ease in future editing. I've just started using Webflow, and if this isn't implemented soon, I will have to go back to hand-coding website or using WordPress, because I have more control.

  • Steffen Henschel commented
    27 Aug 12:26

    Coming from CSS as text, actually the Webflow way doesn't feel like much like "CSS" and "classes" to me and its quite frustrating right now 🙃. Totally not what I expected when Webflow speaks of "CSS" or "classes".

    The coupling of the "classes" is pretty limiting.

  • Adrian Trimble commented
    03 Dec 15:55

    Totally wild that these basic features still haven't been implemented. I'm using Webflow for a simple project at the moment, but based on the continued omission of pseudo elements, descendant, and other non-class selectors, I will not be exploring it for future projects. How can Webflow claim to offer the "power of CSS" when it can't even handle basic descendant selectors that have been part of CSS for 20+ years?