Either I’m not understanding the methodology here or I’m encountering a bug. We have two scenarios where an H4 appears inside an RTF block — a “regular” state wherein H4s have a ‘dark grey’ color:
@Whitfield -
Please include your site’s Read-Only Share Link with your question.
A read-only link allows the community to view your project without making any edits to it and help diagnose your issue or provide feedback.
If your project has custom code or layout issues on the published site, please share that URL/URI as well. That way we can inspect it with dev tools.
The rich text element with classes .rich-text-left .white .w-richtext sets the color of text to white but the H4 child has its color set by the h4 styling which is more specific. So in order to pull off what you want you could use custom code inside the richtext element like <h4 style="white">Your Text </h4> or you could use a tool like Finsweet’s “Powerful Rich Text” in Attributes → Powerful Rich Text - Add HTML and components to Webflow Rich Text Block. Refokus also has something similar. They would give you lots of options without code.
Okay, I think that all makes sense, and I’m familiar with custom CSS, I’ll probably just add a class for this instance and call it good. But am I wrong that this is a bug — shouldn’t the “when nested inside” feature allow me to add ‘white’ to the parent RTF element and then change H4s within accordingly?
Okay, well, I sort of understand insofar as I tried removing the color that had been attached to H4s throughout the site, allowing it to inherit the body text color, after which point the “when inside of” color adjustment worked as expected.
But I’m still not understanding why that happened. To my understanding, the previous structure would have been…
Body text: color 1
H4: color 2
H4 inside RTF: color 3
H4 inside of RTF that has ‘white’ class: color 4 (white)
The above is showing continued increasing specificity, as far as I can tell. How did removing the 2nd level color solve the problem, why was that overriding the 3rd and 4th levels (or in actuality, just preventing the 3rd/4th levels from being differentiated — they were adopting the white color change)?
@Whitfield - I think the easiest way to understand what is happening with styling on an element or its children is to use the built in dev tools in your browser. You can inspect your styles and declarations, the computed values, and test out changes. That is why browser have them.
<h4> element with a style applied would generally have higher specificity than a <div> element with a child <h4> element where the <div> has a color applied via a style declaration.
The reason for this is due to the way CSS specificity works. Specificity is calculated using a formula that takes into account three types of selectors: element selectors, attribute selectors, and class/ID selectors.
In your example:
The <h4> element with a style applied has an element selector (h4) and a style declaration (e.g., color: black;), which means it has a specificity score of 11.
The <div> element with a child <h4> element where the <div> has a color applied via a style declaration has three components:
The <div> element itself is an element selector, giving it a specificity score of 1.
The attribute selector (style) is added to the <div> element’s specificity score, making it a total of 2.
The child <h4> element doesn’t contribute to the specificity of the <div> element.
So, the specificity scores are:
<h4> with style applied: 11
<div> with child <h4> and style declaration: 2
Since 11 is greater than 2, the <h4> element with a style applied has higher specificity and will override any styles set on the <div> element.
It’s worth noting that specificity only affects styles that are defined using selectors. If a style is set using the !important keyword, it can override other styles regardless of their specificity score.
Also it is important to understand that when you add an additional class to an element Webflow creates a descendant selector, not a class list. Nor does it use child combinators which would be very helpful. It’s like leaving half the power of CSS out.
