0

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.

simirimia
  • 334
  • 1
  • 8
  • 1
    you can use the `:not(.ion-page-hidden)` CSS selector – Dorian B Apr 15 '20 at 10:38
  • 1
    `div:not(.ion-page-hidden) .generated-plan {/* style*/}`should do – G-Cyrillus Apr 15 '20 at 10:39
  • @G-Cyrillus Thanks, this works. If you post it as answer I'll accept it. Actually it works with my example, so the answer is correct, but not with my real code. I need to investigate what the relevant difference is. Maybe I'll post another question. – simirimia Apr 15 '20 at 11:12

1 Answers1

1

I am guessing (so please check) that you are looking for these conditions:

  1. the parent element must have the .ion-page class
  2. the parent element must NOT have the .ion-page-hidden class
  3. the child element has the class .generated-plan

The first condition is met by using the class selector .ion-page. The second condition is met by using the not selector with the class selector :not(.ion-page-hidden).
However, both conditions apply on this element. So what you need to do is set them after each other without any space between them .ion-page:not(.ion-page-hidden).

For the third condition you can use the descendant selector (space) with class selector

All together:

div {
  border: 1px solid black;
  padding: 1em;
  margin: 1em;
}

.ion-page:not(.ion-page-hidden) .generated-plan {
  background: yellow;
}
<div class="ion-page ion-page-hidden">
  .ion-page div
  <div class="generated-plan">one</div>
</div>
<div class="ion-page">
  .ion-page div
  <div class="generated-plan">two</div>
</div>
LinkinTED
  • 16,671
  • 4
  • 27
  • 53