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?

score 2 · Answer 1 · answered Dec 20 '22 at 18:00

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 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>

Much neater than using :has() and fully supported in all browsers. Awesome! — Adam, Dec 20 '22 at 18:03
Thank you @Adam, yeah in this case there's no need for a :has() — Kumara, Dec 20 '22 at 18:15
I'm just getting into :has and as you know.. when you have a hammer everything looks like a nail :-D — Adam, Dec 20 '22 at 18:18

score 1 · Accepted Answer · answered Dec 20 '22 at 17:53

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>

OK that's makes sense .. I needed to think from internal element back .. Instead of trying to "drill down" -- Thinking error -- Thank you for the clarification! — Zak, Dec 20 '22 at 17:59

score 1 · Answer 3 · answered Dec 20 '22 at 17:59

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 class="preview-images">
    <!-- This is the first child -->
    <img src='https://picsum.photos/id/237/200'>
  </div>

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

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

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

3 Answers3