How do I create a combo class in Webflow?

Add a second class beside the base class

A class stores styles and reuses them. The moment you style an element, Webflow creates a class, and every later element with that class shares those styles. A combo class is how you vary one of those elements without building the shared styles again from scratch.

Select the element that already has the base class. Click in the Selector field, to the right of that class, and type the new name. You can also press Command + Enter on Mac, or Control + Enter on Windows, or right-click the element and choose Add class. The class after the first one is the combo class. It starts out on this element only, so a style you set now does not rewrite the other elements that use the base class alone.

Example: every call to action uses a class named Button. The pricing page needs a larger one. Add a combo class named Large on that pricing button. Change the padding only while Large is the class you are editing. The buttons in the navbar keep the original padding.

Name classes with letters, numbers, and hyphens, and start with a letter. Names are not case sensitive, so alert and ALERT are the same class. Webflow turns most special characters into hyphens. Two names that differ only by a symbol can collapse into one class, and then a style change hits both. Prefer a name like button-large over a name built from punctuation.

Override one style on that combo

After the combo class exists, new styles and overrides apply to the combo, not to every Button. In the Style panel, inherited values show in orange. Values the combo class sets or overrides show in blue. Change the padding, and only Large should turn blue for that property. Leave the background alone if the pricing button should keep the shared color.

If the navbar buttons also grew, you were still on Button when you dragged the padding. Look at the Selector. The last class is the one receiving the edit. Click Large if the field is showing the base class, then set the padding again.

A combo class can add a property the base class never set, such as a shadow that only the pricing button needs. That new property shows in blue as well. The other buttons do not gain the shadow unless they also get this combo class.

Change the base class without losing the combo

While a combo class is selected, style edits stay on the combo, because it is the more specific selection. To change every button, including the large one, open the base class from the inheritance menu. Click the inheritance selectors indicator above the Selector, choose the base class, and edit there. Click Back above the Selector when you want to return to the combo class.

A background change on Button updates the navbar buttons and the pricing button. A padding change on Button updates only the buttons that do not override padding. If Large already set its own padding, the base padding does not show on that button. Webflow marks that covered value with a red strikethrough on the base class. Clear the override on the combo if the large button should follow the base padding again.

This is also how a mistake spreads. A quick color edit made from the inheritance menu is a site-wide edit. Read the class name above the style controls before you change a color that every page reuses.

Reuse the combo on another element

A second pricing button does not inherit Large by itself. Select it, apply Button first, then apply Large. The order matters. The first class is the base, and the next is the combo.

In the Selector field, type a comma after a class name to commit it and keep typing the next class, without clicking the field again. As you type, the dropdown lists existing classes. Choose the name from that list, or reach it with the arrow keys and press Enter, so you do not create Buttonl by a typo.

Removing a class is separate from deleting it everywhere. Click the Selector and press Delete, or hover the class, open the arrow menu, and choose Remove class. That takes the class off this element. The class remains available for other elements.

Duplicate the class when one combo is not enough

Webflow's classes article says a combo class should stay a variation of one base class, and it recommends against more than one combo class. Extra levels are hard to trace, because each level can override the one under it. If the pricing button needs its own type size, its own padding, and a layout that no longer resembles Button, duplicate the class instead.

Hover the class, click the down arrow, and choose Duplicate class. Rename the copy and press Enter. The duplicate is a new class. Styles do not keep cascading from the original. Later edits to Button leave the copy alone, which is what you want for a branch that has left the shared style.

Use the combo class for the padding exception. Use a duplicated class when the element is really a different component. Publish the pricing page and the navbar after the change. The large button should show the extra padding, and the other buttons should match the base class you meant to leave untouched.