Css – How can I modify an element based on ancestor "has"?

.grid-container {
   background-color: yellow;
}

.grid-container:has(.someClass1) {
   background-color: red;
}

.grid-container:has(.someClass2) {
   background-color: green;
}

/* NEEDS TO VARY BETWEEN CONDITIONS: 
   default -> border: 5px solid grey;
   .grid-container:has(.someClass1) -> border: 5px solid black;
   .grid-container:has(.someClass2) -> border: 5px solid blue;
*/
.thirdElement {
   border: 5px solid grey;
}

<div class="grid-container">
   <div>
     <div>
        <div class="someClass2">Marker 2</div>
     </div>
   </div>
   
   <div>
      <div>
         <div class="thirdElement">
            Unrelated element under .grid-container
         </div>
   
 </div>

It’s easy to modify a particular element if it :has something in its hierarchy, e.g.

.grid-container:has(.specialClass1) {
    
}
.grid-container:has(.specialClass2) {
    
}

But now I need to modify an unrelated element, .thirdElement, somewhere under .grid-container and which has no relation to .specialClass2, based on the ancestral .grid-container:has condition above. There is no sibling or other relationship between .thirdElement and .specialClass[X]. The only thing they have in common is they’re both descendants of .grid-container somewhere.

So what I need to do is

.thirdElement CONDITION-TRUE: .grid-container:has(.specialClass1) {
   /* .. */
}
.thirdElement CONDITION-TRUE: .grid-container:has(.specialClass2) {
   /* .. */
}

If the general condition of .grid-container:has(..) is TRUE, then I need to apply certain tweaks to .thirdElement. Is that possible?

Quick snippet that shows this with colors is attached