Unable to modify style property whose "value is overridden by more specific selector"

Design help General
1

This appears to be somewhat common issue but no clear solution:

  1. Existing website (previous dev team) with pages and elements that have umteen number of combo classes assigned (.hero.home for example)
  2. Viewing a page (home page) at desktop viewport
  3. Selected the element in question, home hero with combo class .home.hero applied at desktop viewport
  4. Size properties are showing overridden by more specific selector (strikeout), only the more specific selector is the same combo class (.hero.home) at the same viewport (desktop)
  5. Changing the selector inheritance does nothing because I’m already viewing the styles for the same viewport and combo class selector
  6. When viewing the CSS Preview for the element in question, I see tens of duplicate entries for the exact same combo class (.hero.home) but with different rules (my hypothesis is that this is the problem)

I’ve seen various posts regarding specificity, inheritance, etc, which is basic CSS 101. This has to do with how webflow manages rules assignment.

Any help appreciated.

2

Hi there,

While combo classes in Webflow are useful, creating multiple combo classes (like .hero.home) can lead to complex inheritance issues and style conflicts. Instead, it’s recommended to duplicate the original class to create a new standalone class that inherits all the original styling. This approach gives you more control over your styles while keeping your project maintainable.

To duplicate a class:

  1. Right-click on the class name in the Style panel
  2. Select “Duplicate”
  3. Give your new class a descriptive name

Remember to periodically clean up any unused styles in your project to maintain optimal performance in the Webflow Designer.

Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.

3

Thanks for the response.

To confirm, AI is recommending we AVOID using combo classes altogether?

4

I wouldn’t go that far. Add your desired style, publish, inspect the CSS with browser dev tools and you’ll see the more specific rules overriding it. Could be custom style blocks?

Finsweet’s browser extension also used to have a way to mitigate this by controlling the sequence in which your classes are published to the CSS, I’m not certain if this is still part of the tool but worth checking.

5

Had this come up on a client build , Webflow sometimes generates duplicate CSS rules for the same combo class, so the “more specific selector” you’re seeing is just another identical rule further down the cascade. Easiest fix is to refactor: strip the extra combo classes and reapply styles on a clean class, then remove unused styles in the Style Manager to stop the duplicates from stacking.