如何修改基于祖先“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>

如果某个特定元素 :has 层次结构中的某些东西,例如。

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

但现在我需要修改一个不相关的元素, .thirdElement ,在下面的某个地方 .grid-container 与无关 .specialClass2 ,基于祖先 .grid-container:has 上述条件。之间没有兄弟姐妹或其他关系 Third元素 和 .specialClass[X] 。他们唯一的共同点是他们都是 .grid容器 在某处

所以我需要做的是

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

如果的一般条件 .grid-container:has(..) 是真的,那么我需要对其进行某些调整 Third元素 。有可能吗?

附加了用颜色显示的快速片段