英文:
Change container "outside" of the selector
问题
我有一个复杂的网站，由多个容器组成。我的目标是检查一个 div 容器上的一个类是否为 "active"，如果是，我需要对另一个位于该容器之外的容器进行着色。所以代码看起来像这样：
<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>
我想在 <tooltip> 标签具有类名为 active 的容器时对具有类名为 colorme 的 div 进行着色。我不确定这是否在一般情况下可行，但我认为我可以构建类似这样的东西。
英文:
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:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.tooltip:has(tooltip > div.active)~main-view>div.colorme {
background: orange
}
<!-- language: lang-html -->
<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>
<!-- end snippet -->
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.
答案1
得分: 1
很遗憾，由于目前对于:has CSS选择器的支持并不是很好，所以这个问题实际上不太可能实现。可以在这里查看支持情况表格：https://caniuse.com/css-has - 没有Firefox的支持，而Firefox在浏览器市场份额中占据了相当大的比例。
除此之外，你的逻辑似乎是正确的。但是为了更好地实现这个功能，可以考虑向父元素添加/删除一个类。这样做会更容易理解，并且需要更简单的CSS。
<div id="wrapper" class="has-active-tooltip">
<div class="tooltip">
<tooltip>
<div class="active">
我的工具提示是激活的
</div>
</tooltip>
</div>
<div class="othercontainer"></div>
<main-view>
<div class="colorme">
测试
</div>
</main-view>
</div>
#wrapper.has-active-tooltip main-view > .colorme {
/*在这里添加样式*/
}
英文:
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*/
}
答案2
得分: 0
你可以使用父容器，并使用 :has() 伪选择器，如下所示：
.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>
英文:
You can use a parent container and then use :has() pseudo selector like below:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.common-parent:has(tooltip .active) main-view .colorme{
color: orangered;
}
<!-- language: lang-html -->
<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>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论