Override Existing Styles And Move It To The Child Element's Style

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

Solution 1:

Finally got it working!

Given this HTML Structure:

<divid="info"><divclass="pop-up">...</div></div><divid="info"><divclass="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.