0

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;
}
Joseph D.
  • 11,804
  • 3
  • 34
  • 67

1 Answers1

0

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)
Obsidian Age
  • 41,205
  • 10
  • 48
  • 71
  • 1
    What is "dint"? – connexo Mar 09 '18 at 02:39
  • @connexo - "To indicate that something came about through a particular force or means" - [**Vocabulary.com**](https://www.vocabulary.com/dictionary/dint). Essentially you can replace "through dint of" with "by means of". It may well be a region-specific thing though :) – Obsidian Age Mar 09 '18 at 02:41
  • I feel smarter already. :) – Jonathan M Mar 09 '18 at 02:42
  • You mean "through dint" can be replaced by "by means of"? What if I only want to replace "dint", not "through dint"? – connexo Mar 09 '18 at 02:45
  • Please note that there has been discussion on `:has` going on since at least 2010, with several drafts being trashed because of the "single pass nature of CSS parsing". I'd replace "**will** become" by "*might* become". – connexo Mar 09 '18 at 02:48
  • @ObsidianAge, thanks for this. I've checked `:has` but unfortunately, it's not yet supported in Chrome and maybe is not supported yet at all. – Joseph D. Mar 09 '18 at 02:53
  • I never thought my issue would turn out to be an English class. :) – Joseph D. Mar 09 '18 at 02:53
  • closing this question. maybe you can check also my follow-up question: https://stackoverflow.com/questions/49187076/overwrite-existing-styles-and-move-it-to-the-child-elements-style – Joseph D. Mar 09 '18 at 05:22