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


1 answer


My solution would be a class:

<div class="ancestor"> <!-- ancestor -->
  <div class="myTarget">
    The div I want to target
  </div>
</div>

      



And the css:

.myTarget {
  position: relative;
}

div.ancestor > .myTarget {
  position: absolute!important;
}

      

0


source







All Articles