Question 225785 in Html Question posted in
Some basic documentation can be found here.

Html – Change container "outside" of the selector

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.

Tags:

4

Answers


  1. Chosen as BEST ANSWER
    0

    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! :)


  2. 0

    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*/
}
    Login or Signup to reply.
  3. 0

    not possible. but if you can use javascript, it makes it possible.

    Login or Signup to reply.
  4. 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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search