Streaming live at 10am (PST)

How do I edit specific classes I've created?

I found an old response from 2014 that states:

There is an option box to the right of the classes text field that lets you select the class you wish to edit. It is not visible if you have focused on the classes text field. So remove your selector from the text field and that option box should re appear.

I absolutely don’t understand what this advice is communicating and I don’t presently see an option to the right of the classes text field. When I look at any options to the right of the classes names all I see is the a dropdown that allows you to rename or duplicate a class. I also see a dropdown that allows you to select pseudo-classes.

How do I edit the specific classes I’ve created? In my example I have two classes there. I want to select one and edit it.

Screenshot 2021-05-31 140939

Screenshot 2021-05-31 140901


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Hey @estevancarlos! Welcome to the forum. :wave:

Where it says Inheriting 4 selectors, click on “4 selectors”.
image

This will then allow you to select specifically your base class from your combo class there.

Checkout this article here about combo classes: Classes | Webflow University

1 Like

Thank you. That clears up some things. I have a follow up. When I created an additional class called, .primary-font, I assigned a font-family to it. My assumption is that this was creating a brand new class by itself. However it did not as demonstrated by the generated code below. How do I add a class without creating a combo class?

.wvfrm-pink {
  color: #fc82bb;
  font-weight: 400;
}

.wvfrm-pink.primary-font {
  font-family: 'Source Sans Pro', sans-serif;
}

Great question @estevancarlos!

Whenever you add a new second class to an item, it will create a combo class.

If you want to add two classes to one element, I recommend using a Global Class for your secondary element. Similar to combo classes, global classes are added to base classes. However, the original element that you style the global class is separate from the base class element.

Essentially, you would create an element with the class “primary-font” separate from your element with the “wvfrm-pink” class. Next, add your font family to the element with the “primary-font” class.

Now when you go to add a second class to your “wvfrm-pink” element you can start typing, and your Global Class will appear in the dropdown.

Note, you might have to clean up classes if you are using the same names as combo classes you have previously set up.

Here is some information on Global Classes.

@Drew_Schafer

The Global class process seems to describe creating a div for some reason, then applying a class there. The impression I get is that this is the only way to ensure the class is created separately as opposed to being combo-ed. Am I understanding that correctly? Would it be fair to call this approach a “hack” or is this by design?

One reason I ask is that I am teaching this technology to students and it’s tricky having to explain a concept and then explain a “hack”. It can confuse their understanding of the concept (in this case, CSS).

The use of Global classes is by Design.

we suggest creating a page where all your global class elements can live, like a Style guide page.

The benefit of this is that you are able to define all of your Global Classes which you can then apply to your design as you go.

There is a feature in Webflow to “Clean Up” styles. This deletes any unused style. The benefit of having the Style Guide page is that every global class is always in use, and you would never delete one of your Global Styles when you perform he Clean Up feature.