如果子元素存在，则覆盖父类型 [英] Override parent style if child element exists

问题描述

我想为每个包含特定类的子元素覆盖父元素 z-index 。

两个不同类别的孩子（w / c我不能改变，因为它是由API生成的）。

首先是 .pop-up ，第二个是 .label 。
两者都将被添加到 #info 下。
$ b HTML结构

 < div id =info> 
< div class =pop-up> ...< / div> 
< / div> 
< div id =info> 
< div class =label> ...< / div> 
< / div> 
  

由于API操作不同， .label 有时会在最近渲染时放在最前面。 #info s z-index 始终始终 110 < code $。



因此，我想检查一个子元素是否存在（例如 .label ）并将父母的 z-index 更新为 109 。

这可能与 css3 ？由于协议，我无法通过JS进行破解。

这是我尝试过的，但无法更新父级的 z-index

  div＃info> div.label {
 z-index：109！important; 
} 
  

解决方案

可能与CSS3。这是因为CSS3 缺少父母选择器 。

请注意， 可能会在 CSS4 ，通过 ：has 伪类 ，您将可以目标 #info ，当它包含标签时：

  div＃信息：has（div.label）
  

I want to overwrite parent's z-index for every child element containing a specific class.

There are two different class of children (w/c I can't change since it's generated by API).

First is a .pop-up and second one is a .label. Both will be added under #info.

HTML Structure

<div id="info">
   <div class="pop-up">...</div>
</div>
<div id="info">
   <div class="label">...</div>
</div>

Due to different API actions, .label will sometimes be on top when it gets rendered recently. #infos z-index is always 110.

Thus, I wanted to check if a child element exists (eg. .label) and update the parent's z-index to 109.

Is this possible with css3? I can't do a hack via JS due to an "agreement".

This is what I've tried, but won't be able to update the parent's z-index

div#info > div.label {
   z-index: 109 !important;
}

解决方案

No, this is unfortunately not possible with CSS3. This is because CSS3 lacks a parent selector.

It should be noted that this will become possible in CSS4, through dint of the :has pseudo-class, where you would be able to target #info when it contains a label with:

div#info:has(div.label)

这篇关于如果子元素存在，则覆盖父类型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！