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
  • Jake Kushner commented
    3 Jun 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 commented
    22 Apr 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 commented
    22 Apr 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

  • Donald R. Simon commented
    7 Apr 12:28pm

    Hello Dear, I am Bm Faruk Zaman. I am a dedicated and hardworking professional SEO Expert. I have 5 years of SEO experience. I am full time specializing in organic Search Engine Optimization & best high-quality SEO backlinks provider. I can get traffic for your website very easily because I am a certified SEO backlinks poster. I am providing High-quality DA Niche Relevant Dofollow 100% manually backlinks for your website.

  • George Galbraith commented
    30 Mar 01:22am

    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

  • Rocky Berlier commented
    15 Mar 10:20pm

    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!

  • Dirkjan Brummelman commented
    22 Jan 09:33am

    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"

  • Denise Dambrackas commented
    17 Jan 11:50pm

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

  • Adrian Trimble commented
    3 Dec, 2019 03:55pm

    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?

  • Steffen Henschel commented
    27 Aug, 2019 12:26pm

    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.

  • Joshua Butts commented
    26 Aug, 2019 02:00pm

    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.

  • Mohit Sharma commented
    8 Aug, 2019 07:57am

    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. 

     

  • Jennifer Arzt commented
    30 Jul, 2019 06:49pm

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

  • Roger David commented
    17 Jul, 2019 11:38am

    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

  • Henry Gillis commented
    12 Jul, 2019 08:46am

    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.

  • Gregor Favre commented
    22 Jun, 2019 11:22am

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

  • Kate Winfield commented
    11 Jun, 2019 07:33am

    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.

  • James Vreeken commented
    31 May, 2019 07:31pm

    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.

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

    💯

  • Oliver Johnson commented
    10 May, 2019 09:21am

    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.

  • Load older comments
  • and 1312 more