CSS :not() selector. Apply style if parent does not exist

Question

I am trying to apply a style to a div based on its parent class. I am using the :not() selector to select the div whose parent is not .container1, the second div should be red, but it's not working.

Example 1

.myDiv:not(.container1) > .myDiv {
  color: red;
}

<div class="container1">
  <div class="myDiv">Div 1</div>
</div>

<div class="container2">
  <div class="myDiv">Div 2</div>
</div>

Example 2

.myDiv:not(.container1 .myDiv) {
  color: red;
}

<div class="container1">
  <div class="myDiv">Div 1</div>
</div>

<div class="container2">
  <div class="myDiv">Div 2</div>
</div>

Is this even possible with CSS? Or is my syntax just off?

Answer 1

CSS can't do "parent lookups" like that. You would need to reverse the structure to something like:

.my-container:not(.container1) .myDiv

Granted, you would need to add the shared my-container class to all "parent" divs of interest.

Answer 2

You're selecting wrong elements. No reverse lookups possible, see here:

div:not(.container1) > .myDiv {
  color: red;
}

<div class="container1">
  <div class="myDiv">Div 1</div>
</div>

<div class="container2">
  <div class="myDiv">Div 2</div>
</div>

---

Ideally, you'd group those parent divs under the same class in order to avoid the super-generic div selector:

.container:not(.container1) > .myDiv {
  color: red;
}

<div class="container container1">
  <div class="myDiv">Div 1</div>
</div>

<div class="container container2">
  <div class="myDiv">Div 2</div>
</div>