I have the following simplified structure:
<div class="ion-page ion-page-hidden">
<div class="generated-plan />
</div>
<div class="ion-page">
<div class="generated-plan />
</div>
I need a CSS selector which selects elements with class "generated-plan" which are not a child of an element which has the class "ion-page-hidden". My expectation is that it matches only the second div. In my real code there are more elements between the ion-page div and the generated-plan div. Also there may be multiple elements with ion-page-hidden class, if this is relevent for the answer.
Background: I'm trying to get reactour to work with Ionic react. Ionic keeps loaded components hidden. Reactour highligts the first element which matches the selector, which may one of the hidden ones. I can't change the properties of the outer div, this is Ionic magic, the inner div is a custom component.