Override existing styles and move it to the child element's style

Question

This is a follow-up question to - Override parent style if child element exists

As per suggestion and comments, :has is yet to be supported and there's no way to modify a parent's style if a certain child element exists. Certainly not possible with just css alone.

I was thinking to pass down the z-index property to the child and unset it from the parent.

Here's what I've tried.

div#info {
   z-index: unset !important;
}

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

div#info > div.pop-up {
   z-index: 110; /* Pop-up should always appear on top */
}

But still didn't work. Is this even possible?

The idea is: making the parent element have no style and z-index will be declared in the child elements.

NOTE: by just using CSS3, no scripts involved. HTML elements and style properties are generated by the API.

Answer 1

Finally got it working!

Given this HTML Structure:

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

I just forced the parent to have no style properties and marked the z-index property for each child as !important

div#info {
   z-index: unset !important;
}

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

div#info > div.pop-up {
   z-index: 110 !important; /* Pop-up should always appear on top */
}

This works for my need. Not sure if it will be useful in general since a parent may have different styles that will be inherited by the child element.

Good thing I only have to worry just one property, the z-index.