CSS Choose first child of parent by child's class name

Question

I am building an image uploader in React, and am almost complete. My next step is trying to get the first child of the rendered div to have a different background color, indicating that it is the "primary" photo chosen. The render looks like :

.preview-images{
    width: 250px;
    border-bottom: 1px solid #BBB;
    border-right: 2px solid #BBB;
    border-radius: 10px;
    margin-bottom: 20px;
    padding: 15px;
    font-size: 30px;
    display: inline-grid;
    margin-right: 20px;
}

div:has(> .preview-images){
    border: 5px solid #FF0000;
}

<div> <!-- This is the direct parent -- It is a rendered react element, I cannot give an ID or Class -->

  <div class="preview-images"> <!-- This is the first child -->
    <img src=. ..>
  </div>

  <div class="preview-images"> <!-- This is a direct child -->
    <img src=. ..>
  </div>

  <div class="preview-images"> <!-- This is a direct child -->
    <img src=. ..>
  </div>

</div>

This is the furthest I can get, where I have selected the direct parent using has(< .. But I cannot get the first-child of this. Why does div:has(> .preview-images):first-child{ not work? According to questions Like This One and This One -- nested pseudo selectors should work here. What am I doing wrong?

Answer 1

You want div.preview-images:first-child:has( > img). With your method, you're trying to select a child of the div with the class of preview-images, which doesn't exist. The revised selector selects the div with the class of preview-images which is the first child and had an image as its child.

.preview-images {
  width: 250px;
  border-bottom: 1px solid #BBB;
  border-right: 2px solid #BBB;
  border-radius: 10px;
  margin-bottom: 20px;
  padding: 15px;
  font-size: 30px;
  display: inline-grid;
  margin-right: 20px;
}

div.preview-images:first-child:has( > img) {
  border: 5px solid #FF0000;
}

<div>
  <!-- This is the direct parent -- It is a rendered react element, I cannot give an ID or Class -->

  <div class="preview-images">
    <!-- This is the first child -->
    <img src=. ..>
  </div>

  <div class="preview-images">
    <!-- This is a direct child -->
    <img src=. ..>
  </div>

  <div class="preview-images">
    <!-- This is a direct child -->
    <img src=. ..>
  </div>

</div>