[SOLVED] how to select the grandparent selector of a class CSS

how to select the grandparent selector of a class CSS

I have this image :

what I'm trying to do is to apply css to the yellow class (st-emotion-cache-1jicfl2) based on his child st-key-image-container in green

because I have two pages which contains the same css selector (st-emotion-cache-1jicfl2) the only way to apply css to it is to select his unique child ex :st-key-image-container i have tried this :

.st-emotion-cache-1jicfl2:has(.st-key-image-container){
width: 100%;
padding:0px !important; 
min-width: auto;
max-width: initial;

 }

but it didnt work. could you help please ?

Solution

Your code should work unless there is other more specific CSS somewhere.

Perhaps there is something else going on. Try my code to see if at least it changes color. Right-click and inspect to see what the values are in the computed CSS

.st-emotion-cache-1jicfl2:has(.st-key-image-container) {
  width: 100%;
  height: 200px;
  padding: 0px !important;
  min-width: auto;
  max-width: initial;
  background-color: red;
  display:flex;
}

.st-key-image-container {
  background-color: yellow; margin-top: 50px;
}

<div class="st-emotion-cache-1jicfl2">Does not have an image container</div>
<div class="st-emotion-cache-1jicfl2">DOES have an image container
  <div>
    <div>
      <div>
        <div>
          <div>
            <div>
              <div>
                <div class="st-key-image-container">Image container</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="st-emotion-cache-1jicfl2">Does not have an image container</div>