-2

I have a complex websites which consists of containers. My goal is to check a class on a div container if the class is "active" and if so, I need to color another container which is "far" outside of that container. So the Code looks like this:

.tooltip:has(tooltip > div.active)~main-view>div.colorme {
  background: orange
}
<div class="tooltip">
  <tooltip>
    <div class="active">
      My tooltip is active
    </div>
  </tooltip>
</div>
<div class="othercontainer">
</div>
<main-view>
  <div class="colorme">
    Test
  </div>
</main-view>

And I want to color the div with class colorme as soon as the <tooltip> tag has a container with class active. I am not sure if this is in general possible, but I thought I could build something like this.

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
Stefan Barth
  • 44
  • 4
  • I've converted your code to a live demo and added a visible effect in the ruleset. It works fine when I test it in a browser that supports `:has`. Obviously it doesn't if I test it in [one that doesn't](https://caniuse.com/?search=has). – Quentin Aug 08 '23 at 15:33
  • You are great, thank you! In general this is not my website and I am only able to use the HTML what I pasted. But I was not aware to use the parent container in order. So this works like a chmarn and I know check in if there is a class "active" in order to change "colorme". Thanks guys for the help and the quick response! :) – Stefan Barth Aug 08 '23 at 16:08
  • not possible. but if you can use javascript, it makes it possible. – Alexander WePunkt Aug 08 '23 at 15:38

2 Answers2

1

Unfortunately this won't really be possible since the :has CSS selector is not really well supported right now. See the support table here: https://caniuse.com/css-has - no Firefox support, and that's a pretty big piece of the browser market share.

Other than that, your logic seems sound. But to get this working in a better way might be to add/remove a class to a parent element. This will be easier to understand, and require less complex CSS

<div id="wrapper" class="has-active-tooltip">
  <div class="tooltip">
    <tooltip>
      <div class="active">
      My tooltip is active 
      </div>  
     </tooltip>
  </div>
  <div class="othercontainer"></div>
  <main-view>
   <div class="colorme">
    Test
   </div>
  </main-view>
</div>

#wrapper.has-active-tooltip main-view > .colorme {
  /*stuff here*/
}
Chris Barr
  • 29,851
  • 23
  • 95
  • 135
0

You can use a parent container and then use :has() pseudo selector like below:

.common-parent:has(tooltip .active) main-view .colorme{
    color: orangered;
}
<div class="common-parent">
    <div class="tooltip">
        <tooltip>
            <div class="active">
                My tooltip is active
            </div>
        </tooltip>
    </div>

    <div class="othercontainer">
    </div>

    <main-view>
        <div class="colorme">
            Test
        </div>
    </main-view>
</div>
Md. Rakibul Islam
  • 2,140
  • 1
  • 7
  • 14