Combo classes works a little difference on webflow.
Add one and only one class for “heading” element - than add class named “red” (change color to red).
The CSS output is:
Now add two classes “i-am” “not-red” (Combo) to another element. Than change the color to blue. The output will be:
Learn about this selector:
color-red (As third class) to
The text still blue. This is not a BUG (Learn about css specificity).
.i-am.not-red is more specific than
(One said “select element with class “i-am” And& “not-red” and the other said select element with class of “color-red” - the first `more specific” win).
Select new element & Create class “
very-big-text” and change
88px. The output:
Now add one more class “
i-am-also-bold” (Create combo) and set the font-weight to bold.
Now if you add to this combo the “r
ed-text” class the output will be:
text with font-size 88px, bold, and red (No conflict her).
From theory to practice
Its better to declare fonts on
body level (Than any class you added with font change will be more
specific “win” the body font)
Dont repeat yourself. If you create a
button - first create
base class (Without COMBO!). Set padding, font size and on. Than and only than start to create combo-classes for
"red-button" "blue-button" "outline-button" & "large-button". (Otherwise each time you should create everything from zero).
Summary: Like the “red-text” example this is how CSS works.