Can I create an element based on the ancestor position property using pure CSS?
Is it possible to select an element based on the value of its ancestor CSS property? Let's say I have the following HTML text:
<div><!-- ancestor -->
<!-- I may have N level descendants which are as well ancestors for the upcoming div -->
<div class="myTarget">
The div I want to target
</div>
</div>
I don't know anything about ancestors other than that if one of them has a CSS property display: table-cell
then I want it to myTarget
have position: absolute
, otherwise it should position: relative
.
.myTarget {
position: relative;
}
/*************************************************************************************************
* This is actually the question, how to target .myTarget when some ancestor div contains a given
* cssProperty. Code below is just pseudo-code not actual CSS.
*************************************************************************************************/
div[cssProperty=desiredValue] .myTarget {
position: absolute;
}
My guess is that I can't, but since it is possible to select elements based on their attributes, I thought that maybe this should be the way to select and also based on its CSS properties.
+3
source to share