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

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 > <!-- This is the first child -->
    <img src=. ..>
  </div>

  <div > <!-- This is a direct child -->
    <img src=. ..>
  </div>

  <div > <!-- 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?

CodePudding user response：

You can simply use the :first-of-type CSS pseudo-class, which represents the first element of its type among a group of sibling elements. In your case, the child can have the class so directly use the pseudo-class like this,

div.preview-images:first-of-type {
   /* your stuff here */
}

You may modify your code like below,

.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-of-type {
    border: 5px solid #FF0000;
}

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

  <div > <!-- This is the first child -->
    <img src=. ..>
  </div>

  <div > <!-- This is a direct child -->
    <img src=. ..>
  </div>

  <div > <!-- This is a direct child -->
    <img src=. ..>
  </div>

</div>

CodePudding user response：

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 >
    <!-- This is the first child -->
    <img src=. ..>
  </div>

  <div >
    <!-- This is a direct child -->
    <img src=. ..>
  </div>

  <div >
    <!-- This is a direct child -->
    <img src=. ..>
  </div>

</div>

CodePudding user response：

Select the div that has children with class of .preview-images using div:has(.preview-images) then select the first image of the .preview images child using .preview-images:first-child img as below

Hope this helps. Note it might not work on firefox but hopefully that'll get sorted soon.

div:has(.preview-images) .preview-images:first-child img {
  outline: 2px solid red;
}

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

  <div >
    <!-- This is the first child -->
    <img src='https://picsum.photos/id/237/200'>
  </div>

  <div >
    <!-- This is a direct child -->
    <img src='https://picsum.photos/id/238/200'>
  </div>

  <div >
    <!-- This is a direct child -->
    <img src='https://picsum.photos/id/239/200'>
  </div>
</div>