@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.

Guten Tag

Nach acht spannenden Jahren bei Artos widme ich mich ab sofort neuen Herausforderungen.

Ihre Mail wird intern weitergeleitet.
Bitte melden Sie sich in Zukunft via Mail direkt bei info@art-os.ch.

Freundliche Grüsse
Markus Iseli

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).

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

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

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

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!

+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.

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.

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

While Webflow excels in a whole host of areas, this is an absolute must. I can't quite understand why this isn't yet implemented

I was looking for the wishlist just so I could make this request! The ability to make classes that only apply to what is being changed would be enormous. Some call this a Universal Class or Global Class, and it would be a tremendous help. For example, setting just the Text-Shadow, Box-Shadow, Border or Border Radius as a separate class and then being able to apply it to any other class as a Combo-class. HUGE benefit!

Yes, please! 
Right now I'm creating a "styles" page using blanc divs with only one class attached, so I can stack these classes and still be able to alter just one single style element later on.

Also to be able to delete just one class out of a bunch of stacked classes would be so helpful. Right now if you have "class 1" + class 2 + class 3" - you can't delete "class 2" without also removing "class 3"

I wish that the functionality developed for nesting classes in an RTE could be used throughout the site.

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?

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.

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.

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. 

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

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.