Wondering if it's possible to style an element based on its ancestors' CSS property value. Consider the HTML snippet below:
<div><!-- ancestor -->
<!-- Any number of descendant levels before reaching the target div -->
<div class="myTarget">
The desired div
</div>
</div>
In this scenario, I need to apply different styles to myTarget depending on whether any ancestor has the CSS property display: table-cell. If true, then set position: absolute; otherwise, set position: relative.
.myTarget {
position: relative;
}
/***********************************************************************************************
* Here comes the question - How can we style .myTarget based on an ancestor's cssProperty?
* The code snippet below is just a concept and not actual CSS.
***********************************************************************************************/
div[cssProperty=desiredValue] .myTarget {
position: absolute;
}
It's uncertain whether such styling is feasible using purely CSS selectors, given that while attribute-based selection is common, targeting elements based on their CSS properties is less typical.