Why am I unable to edit the class in Webflow when I receive the message "The value is overridden by more specific selector"?

You're seeing "The value is overridden by more specific selector" in Webflow because the style you're trying to change is being controlled by a more specific rule in the CSS hierarchy.

​

1. Understand CSS Specificity in Webflow  

• Webflow uses standard CSS specificity rules, meaning that styles applied via more specific selectors (e.g., combo classes, IDs, or states like hover) will override less specific ones.
• When a class says “overridden,” it means another class or selector further down in the cascade is taking priority.

​

2. Identify Where the Style is Coming From  

• Check combo classes: You may be trying to change a base class, but a combo class (e.g., .button.primary) is taking priority.
• Look for pseudo-classes: The style might be set on a different state like hover, focused, or pressed.
• Global tags or elements: Styles applied to tags like All Buttons or All Links can override base styles.

​

3. Use Webflow’s Style Panel to Navigate Specificity  

• In the Style panel, when you hover over the overridden value, Webflow will show which selector is overriding it.
• Click “Select selector” in the tooltip popup to jump to the more specific class where the style is set.

​

4. Ways to Regain Control  

• Edit the more specific class or selector: Modify styles within the combo class or pseudo-class that currently holds priority.
• Refactor CSS hierarchy: Consider simplifying or restructuring your class usage if specificity is becoming overly complex.
• Use Webflow's Inheritance Visualization (icon at the top of the Style panel) to see style origins and cascade.

​

Summary  

You're unable to change the class style because a more specific selector (like a combo class or interaction state) is overriding it. Use the Style panel to locate that specific rule and apply your changes there.