Css select first child inside another childs

Question

I am trying to select the first child inside some other elements. This is the example.

<div class="parent">
 <div class="feature">
  <div class="some"></div>
 </div>
 <div class="feature">
  <div class="some"></div>
 </div>
 <div class="feature">
  <div class="required">I NEED TO SELECT THIS</div>
 </div>
 <div class="feature">
  <div class="required">NOT THIS</div>
 </div>
</div>

I want to select first occurrence of required. And also there can be arbitrary numbers div with .feature ( with .some) before i get to div which contains .required .

Can this be done ?

What i tried. (not working)

.parent .required:first-child {}
.parent .required:first-of-type {}

You can try .parent > .required which will select all .required under .parent class and than you can undo this for all except the first .required class with .parent > .required ~ .required . You can check this thread: https://stackoverflow.com/questions/2717480/css-selector-for-first-element-with-class — PIzmAR, Dec 14 '21 at 09:55
@JureVidmar thanks ! I did go through that thread. But It seems to be mostly for direct children under parent. I did try .parent > .required ~ .required, but it does not work. — Sharath N B, Dec 14 '21 at 10:11
Im not sure if its possible with css, but with javascript it is. "document.querySelector('.parent .feature .required');" will fetch the first occurrence and then you can assign any class to it. — Jibin.Jay, Dec 14 '21 at 10:20
Thanks ! will use JavaScript, if this is not possible in CSS. — Sharath N B, Dec 14 '21 at 10:27
@Martin thanks ! I tried the above, but it selects both of them. Instead of the first .required. — Sharath N B, Dec 15 '21 at 09:08
Oh sorry, I missed the nesting. In that case it can't be done with CSS. — Martin, Dec 15 '21 at 11:01

Aman Sharma · Answer 1 · 2021-12-14T09:58:03.607

0

.parent .feature .required:first-child {
 color: red;
}

    <div class="parent">
      <div class="feature">
       <div class="some"></div>
     </div>
   <div class="feature">
     <div class="some"></div>
   </div>
   <div class="feature">
    <div class="required">I NEED TO SELECT THIS</div>
   </div>
   <div class="feature">
   <div class="required">NOT THIS</div>
   </div>
  </div>

edited Dec 14 '21 at 09:58

answered Dec 14 '21 at 09:51

Aman Sharma

933
1
4
12

Thanks for the answer. But i need to select first occurrence of .required. I have updated the question. – Sharath N B Dec 14 '21 at 09:54
This doesn't work for what OP wants – MattHamer5 Dec 14 '21 at 09:55

score 0 · Answer 2 · answered Dec 14 '21 at 10:29

You need to add a separate class for this. .parent .feature .required:first-child will work for the first childs of required class. In your code <div class="required">I NEED TO SELECT THIS</div> and <div class="required">NOT THIS</div> both are first childs of .parent class. So if you have at least two child of class then following works.

.parent .feature .required:first-child {
            color:red;

        }

<body>
        <div class="parent">
            <div class="feature">
                <div class="some"></div>
            </div>
            <div class="feature">
                <div class="some"></div>
            </div>
            <div class="feature">
                <div class="required">I NEED TO SELECT THIS (First child)</div>
                <div class="required">NOT THIS(second child)</div>
            </div>
            <div class="feature">
                <div class="required">NOT THIS (This is also first child)</div>
            </div>
        </div>
    </body>

Hope you will understand the problem.

You can define different hierarchies according to your requirements. — Ishtiaq, Dec 14 '21 at 10:42

Css select first child inside another childs

2 Answers2