I’ve applied a combo class to a div to specify a certain font color (services-text-color).
I then selected another div with text, to apply the same font color. I start to type in the name of the class used for the previous div, and it doesn’t show up in the list of already-created classes, which I think I understand, because Webflow appends child classes to parent classes and child classes cannot be used independently of the parent class.
My question is: What does this message mean? If I can’t apply the previously created child class (as indicated both by the fact that I can’t select it from the list of existing classes, and by the appearance of the Create button), why do I get a message that using the previously created child class will modify existing classes?
Hi @tkister, that is a really good question. Let me help to explain this a bit:
So let’s say I create a class called “Button” and give it a background color of blue
Then I create a few buttons, and one of them I want to have Primary styling - so I add a combo class, so you see “Button | Primary” in the class selector
In the “Primary” class (“.button.primary”), I set a background color of red and add some padding
Now, somewhere unrelated, I created another Div Block, and when it doesn’t have a class I type in “Primary” as the main class — this is when the warning will show up
That’s because if I give that “Primary” global class (for example) a thick red border, the “.button.primary” element will also get that border
Does that make sense? If there is further questions, let me know
To be clear, I’m talking about child classes only - so I’m not talking about using “Primary” as a parent class. (Not sure if that matters.)
So, on the “somewhere unrelated,” using the pre-existing class “primary” actually does apply the existing child class? Or is it just that the name is already taken, and, even though the class exists, you can’t actually use it on a different element (because it is associated with a different parent class)? Wait… except you can use it, because the message says you can change it and it will effect other elements…
Sorry - I’m just having a hard time getting it.
It seems like this must have something to do with why people use a blank page as a sort of style sheet…
Yep, if the Primary class is used as a combo class, and then the Primary class is used as a global class, a style change to the global Primary class will affect to the Primary combo class.
You are not prohibited from doing it, just be aware that style changes to the global Primary class could affect to other combo classes with the same name.
If it helps, I am happy to create a quick example to show this behavior.
What do you mean by “global” class? Is it the same thing I’m calling a “parent” class?
So, my understanding is that the first class is a “parent” (global?) class, and that all classes used after the first class are “combo” classes (“child” classes). Is that right?
So, in the following screen shot,
“three-column-heading” is the parent/global class, and “tab-panel-heading” and “column-heading” are the child/combo classes.
Have I got that right?
If so, then I don’t understand your statement "…a style change to the global Primary class will affect to the Primary combo class.’ (I’m only talking about “child” classes.)
(I don’t mean to be difficult – sometimes terminology can make the difference between understanding and not understanding.)
Hi @tkister, yes the three-column-heading is the global class. The column-heading is the combo class.
If you were to create a new element, and create a global class called column-heading, and you give that some styling, lets say a red border, then the column-heading combo class will also get the red border, because it has the same name as the global class.
Ok, so you don’t actually “create” a child/combo class in this case (even though “Create” shows up, and the existing class doesn’t show in the list of selectable classes), because it does exist, and, by typing the name in, you are actually selecting it.
Result: White background div with a 2px solid red border
If I apply .Fill to another div block as a global class and change it to a background color of #666, then my result for the combo class example will now be a gray background div with a 2px solid red border.
Is that correct? If it is, then here’s where I kind of lose certainty about what I’m doing…
Let’s say I have another combo class using .Fill as the second class:
Global class: .Circle (properties: radius: 100%)
Result: Transparent circle div
Combo class:** .Circle** + .Fill (change .fill background color property from white to black)
Result: Black circle div
So my question is, does changing this last combo class .Fill affect the properties of the earlier combo class .Fill? I’m thinking it does not, but I could be wrong and want to find out sooner than later!
Hi @ctotty, good question, in that case, then both combo classes that have the name “Fill” will inherit the global “Fill” class background of #666, but those combo classes will not affect each other and styling changes to either of the combo classes will not affect to the global class named “Fill”.
If you give each of the combo classes named “Fill” a different height lets say, the combo classes will not affect each other and each will have a separate height.
If you change the “Fill” global class, then both “Fill” combo classes will inherit the styles made to the “Fill” global class.
@cyberdave: Thanks for taking the time to make the video! It shows what you were explaining very well.
And, the same applies to the situation I described, in which you apply an existing child/combo class to a parent (rather than using the child/combo as a parent).
I do think this could be much simpler in the UI, perhaps if the existing class showed up in the list of existing classes. Dunno… it would take some thought.
I’m getting the warning when I use not the same class name but the same WORD wthin a class which makes this whole thing bizarre. Basically if I have a class called “rs logo” and another one called “rasp logo” I’m getting the warning. Is this a bug? If not I don’t get it, I’m going to run out of words!
)
