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!

  • Rajeesh Acodez commented
    16 Oct, 2024 08:11am

    When i came to Webflow for the first time, i noticed that these basic pseudo elements like before and after are not supported (we have to use custom css). Most of the layout these days need after and before pseudo support. So its just a basic CSS things. I dropped Webflow just for this reason.

  • Jean Costa commented
    22 Sep, 2024 05:52pm

    In a way, this has been partially shipped with the use of the custom element and adding the "class" attribute

  • Jessie Traslavina commented
    14 Sep, 2024 07:01pm

    correction; They build in figma and then bring into webflow. I found it you bring in all your sections first its easy breezy. Found that tip i think on youtube. Its so much better that way. It was more painful before

  • Jessie Traslavina commented
    14 Sep, 2024 06:58pm

    i see the top developers on webflow like to build in figma, then import to figma. Design issue solved. I requested co-pilot. That would make all our dreams come true


  • Bernt Roalkvam commented
    5 Jul, 2024 12:39pm

    This is needed, Webflow even uses ":before" on their homepage...

  • Lucian Chevallier commented
    3 May, 2024 01:02pm

    This would still be a massively helpful feature, even after any updates mentioned in the Admin Response... Pseudo elements and complex CSS selectors are the powerhouse of CSS!

  • Mico Irvin De Mesa commented
    27 Apr, 2024 02:42am

    Try my plugin called WindFlow!

    Use utility-based classes without compound rules. Use parent/sibling selectors and and elements like before/after using Tailwind classname rules https://tailwindcss.com/docs/hover-focus-and-other-states

    WindFlow enables Tailwind classnames on your elements.

    Install now https://webflow.com/apps/detail/windflow

  • Dora Bono commented
    19 Mar, 2024 10:11am

    thanks for sharing...

  • Stof Hofer commented
    29 Feb, 2024 04:55pm

    How would you not support these? This is clearly an important, widely used feature of CSS. Please add!

  • Soraya Demmers commented
    29 Feb, 2024 09:30am

    I love the 'custom properties' update, but no support for :after! I want to be able to add extending borders on cms items and target the last child! IMPOSSIBLE. Custom CSS still the best way to go in 2024 :)

  • Ruben commented
    8 Feb, 2024 08:17am

    +1

  • Cyrille Berne commented
    19 Dec, 2023 10:06pm

    Webflow class system is a nightmare for perfectionists, which is supposedly its target audience. Please do something, Webflow is not above other websites builders for nothing. Don't oversimplify.

  • Devin Smith commented
    27 Nov, 2023 09:41pm

    This limitation is a real drag. I love Webflow, but not having this capability when it's such a basic thing in CSS is tough. I recognize that it's probably neither here nor there for people who do not know how to write HTML or CSS, but this feels like a downgrade whenever I build a site. Can you please reconsider on this?

  • Lennart Hennig commented
    20 Sep, 2023 03:39pm

    Another idea that obviously EVERYONE wants and is ignored by webflow for 6 years. If I was running this company I would make the first two pages of the wishboard mandatory projects for the product team. Embarrassing.

  • Kyle Palermo commented
    2 Jun, 2023 04:28pm

    For developers coming into Webflow, the lack of really basic css selector control is a huge turn off. If you want more adoption, at some point you're going to have to open up the platform to modern css. I think this would be a hell of a lot more useful for developers than a React integration :)

  • Guest commented
    14 May, 2023 11:25am

    Yes please, the current combo classes are kinda getting less useful the more you actually try to use them.

  • Wouter van Waning commented
    12 May, 2023 12:19pm

    The lack of this feature makes every Webflow project so needlessly more bloated and messy to work with. Fundamental CSS logic missing, for what it seams no reason at all.... Love the way you describe this Brendan, even though the fact that you wrote this has been 6 years ago...

  • Mehnz commented
    8 Apr, 2023 05:13am

    sometimes I'd like to just say Go that thing yourself, just a few world class developer away to graphql your entire infastructure while you go keep hiring new dmos cmos ufos. ...you realize at your pace webflow will never run parallel with the cutting edge? nvm, all the 2603 voters from 2017 to present... all are doing fine, just that weird taste you've left us thinking the love was mutual.

  • Alex Bass commented
    24 Mar, 2023 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

  • Load older comments
  • +2723