如果正文/背景颜色为白色，请更改链接颜色

Question

Links on our website in an element with the class "elementor-text-editor" are styled with this color rule:

.elementor-text-editor a {
    color: #e9741f;
}

How can we automatically change the link color to #ffd329 if the link appears on a white background? (if the link appears in an element, such as a div, with a color other than #fff, we would not want the link color to change)

Answer 1

In CSS, use the Child Combinator ( > ) Selector to color a URL differently based on what container it is in. So, for example, you would have a #white-background and #blue-background div 's, each differently colored. Then you'd be able to affect just one background with...

#blue-background > .elementor-text-editor { ... }

What happens within the ... will only affect links with a blue background . Demo...

 .elementor-text-editor { color: #e9741f } #blue-background > .elementor-text-editor { color: #FFFFFF; } #white-background { background-color:white; } #blue-background { background-color:blue; }

 <div id="white-background"> <a class="elementor-text-editor" href="wikipedia.org">link1</a> </div> <div id="blue-background"> <a class="elementor-text-editor" href="wikipedia.org">link2</a> </div>

Disclaimer: This will only work for static -positioned elements. If you have absolute elements, or anything fancy like that, you'll need to think of another approach. I don't see enough detail to give further advice, though.