Select the first div inside a div but only if there are 10 of them

Question

I want to select the first div.favourite-image inside #user-favourites-card only if there are exactly 10 div.favourite-image inside #user-favourites-card.

my attempt:

#user-favourites-card div.favourite-image:nth-last-child(10):first-child

the html to select from:

<div _ngcontent-qcm-36="" class="card-noshadow" id="user-favourites-card">
   <div _ngcontent-qcm-36="" class="first-card-header">
      <h6 _ngcontent-qcm-36="">Favourites</h6>
   </div>
   <div _ngcontent-qcm-36="" class="row">
      <!--template bindings={
  "ng-reflect-ng-for-of": "[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]"
}--><div _ngcontent-qcm-36="" class="col-sm-6 col-md-4 col-xl-4">

         <div _ngcontent-qcm-36="" class="favourite-image" ng-reflect-ng-style="[object Object]" style="background-image: url(&quot;result-images/dairy_free_parmesan_alternative_original.jpg&quot;);"></div>
      </div><div _ngcontent-qcm-36="" class="col-sm-6 col-md-4 col-xl-4">

         <div _ngcontent-qcm-36="" class="favourite-image" ng-reflect-ng-style="[object Object]" style="background-image: url(&quot;result-images/dairy_free_mozzarella_alternative.jpg&quot;);"></div>
      </div><div _ngcontent-qcm-36="" class="col-sm-6 col-md-4 col-xl-4">

         <div _ngcontent-qcm-36="" class="favourite-image" ng-reflect-ng-style="[object Object]" style="background-image: url(&quot;result-images/dairy_free_tasty_cheese_sauce.jpg&quot;);"></div>
      </div><div _ngcontent-qcm-36="" class="col-sm-6 col-md-4 col-xl-4">

         <div _ngcontent-qcm-36="" class="favourite-image" ng-reflect-ng-style="[object Object]" style="background-image: url(&quot;result-images/dairy_free_mild_cheese_mix.jpg&quot;);"></div>
      </div><div _ngcontent-qcm-36="" class="col-sm-6 col-md-4 col-xl-4">

         <div _ngcontent-qcm-36="" class="favourite-image" ng-reflect-ng-style="[object Object]" style="background-image: url(&quot;result-images/sugar_free_dark_chocolate_salted_caramel.png&quot;);"></div>
      </div><div _ngcontent-qcm-36="" class="col-sm-6 col-md-4 col-xl-4">

         <div _ngcontent-qcm-36="" class="favourite-image" ng-reflect-ng-style="[object Object]" style="background-image: url(&quot;result-images/alpro_drink_for_professional.jpg&quot;);"></div>
      </div><div _ngcontent-qcm-36="" class="col-sm-6 col-md-4 col-xl-4">

         <div _ngcontent-qcm-36="" class="favourite-image" ng-reflect-ng-style="[object Object]" style="background-image: url(&quot;result-images/alpro_custard.jpg&quot;);"></div>
      </div><div _ngcontent-qcm-36="" class="col-sm-6 col-md-4 col-xl-4">

         <div _ngcontent-qcm-36="" class="favourite-image" ng-reflect-ng-style="[object Object]" style="background-image: url(&quot;result-images/alpro_coconut_dessert.jpg&quot;);"></div>
      </div><div _ngcontent-qcm-36="" class="col-sm-6 col-md-4 col-xl-4">

         <div _ngcontent-qcm-36="" class="favourite-image" ng-reflect-ng-style="[object Object]" style="background-image: url(&quot;result-images/alpro_creamy_caramel.jpg&quot;);"></div>
      </div><div _ngcontent-qcm-36="" class="col-sm-6 col-md-4 col-xl-4">

         <div _ngcontent-qcm-36="" class="favourite-image" ng-reflect-ng-style="[object Object]" style="background-image: url(&quot;result-images/dairy_free_sour_cream_alternative.jpg&quot;);"></div>
      </div>
   </div>
</div>

aside: I'm wanting to select this exact element to prove there are 10 of them exactly in a Jasmine test.

This page shows how it can be done. What am I doing wrong?

Answer 1

Your attempt doesn't correctly select the children as you'd expect. You'll notice that if you try out your selector with just :first-child that it doesn't do anything. Each <div class="col-sm-6 col-md-4 col-xl-4"></div> is the direct child following the row class. Any :child like selector requires you to operate on direct parent to child relationships, so your extra divs obscure that.

Instead, you can try this selector:

#user-favourites-card .row div:nth-last-child(10):first-child .favourite-image

As seen in this fiddle.

Alternatively, if you add the favourite-image class alongside your column classes, you can then stick to the selector you tried earlier.

For example:

<div class="col-sm-6 col-md-4 col-xl-4 favourite-image">
   ...
</div>

As seen in this fiddle.

Answer 2

To get the first element of a querySelectorAll node list if its length is exactly 10:

favImg = function() {
  favImgList = document.querySelectorAll('#user-favourites-card div.favourite-image');
  return (favImgList.length == 10) ? favImgList[1] : 'null';
}
console.log(favImg());

<div _ngcontent-qcm-36="" class="card-noshadow" id="user-favourites-card">
  <div _ngcontent-qcm-36="" class="first-card-header">
    <h6 _ngcontent-qcm-36="">Favourites</h6>
  </div>
  <div _ngcontent-qcm-36="" class="row">
    <!--template bindings={
  "ng-reflect-ng-for-of": "[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]"
}-->
    <div _ngcontent-qcm-36="" class="col-sm-6 col-md-4 col-xl-4">

      <div _ngcontent-qcm-36="" class="favourite-image" ng-reflect-ng-style="[object Object]" style="background-image: url(&quot;result-images/dairy_free_parmesan_alternative_original.jpg&quot;);"></div>
    </div>
    <div _ngcontent-qcm-36="" class="col-sm-6 col-md-4 col-xl-4">

      <div _ngcontent-qcm-36="" class="favourite-image" ng-reflect-ng-style="[object Object]" style="background-image: url(&quot;result-images/dairy_free_mozzarella_alternative.jpg&quot;);"></div>
    </div>
    <div _ngcontent-qcm-36="" class="col-sm-6 col-md-4 col-xl-4">

      <div _ngcontent-qcm-36="" class="favourite-image" ng-reflect-ng-style="[object Object]" style="background-image: url(&quot;result-images/dairy_free_tasty_cheese_sauce.jpg&quot;);"></div>
    </div>
    <div _ngcontent-qcm-36="" class="col-sm-6 col-md-4 col-xl-4">

      <div _ngcontent-qcm-36="" class="favourite-image" ng-reflect-ng-style="[object Object]" style="background-image: url(&quot;result-images/dairy_free_mild_cheese_mix.jpg&quot;);"></div>
    </div>
    <div _ngcontent-qcm-36="" class="col-sm-6 col-md-4 col-xl-4">

      <div _ngcontent-qcm-36="" class="favourite-image" ng-reflect-ng-style="[object Object]" style="background-image: url(&quot;result-images/sugar_free_dark_chocolate_salted_caramel.png&quot;);"></div>
    </div>
    <div _ngcontent-qcm-36="" class="col-sm-6 col-md-4 col-xl-4">

      <div _ngcontent-qcm-36="" class="favourite-image" ng-reflect-ng-style="[object Object]" style="background-image: url(&quot;result-images/alpro_drink_for_professional.jpg&quot;);"></div>
    </div>
    <div _ngcontent-qcm-36="" class="col-sm-6 col-md-4 col-xl-4">

      <div _ngcontent-qcm-36="" class="favourite-image" ng-reflect-ng-style="[object Object]" style="background-image: url(&quot;result-images/alpro_custard.jpg&quot;);"></div>
    </div>
    <div _ngcontent-qcm-36="" class="col-sm-6 col-md-4 col-xl-4">

      <div _ngcontent-qcm-36="" class="favourite-image" ng-reflect-ng-style="[object Object]" style="background-image: url(&quot;result-images/alpro_coconut_dessert.jpg&quot;);"></div>
    </div>
    <div _ngcontent-qcm-36="" class="col-sm-6 col-md-4 col-xl-4">

      <div _ngcontent-qcm-36="" class="favourite-image" ng-reflect-ng-style="[object Object]" style="background-image: url(&quot;result-images/alpro_creamy_caramel.jpg&quot;);"></div>
    </div>
    <div _ngcontent-qcm-36="" class="col-sm-6 col-md-4 col-xl-4">

      <div _ngcontent-qcm-36="" class="favourite-image" ng-reflect-ng-style="[object Object]" style="background-image: url(&quot;result-images/dairy_free_sour_cream_alternative.jpg&quot;);"></div>
    </div>
  </div>
</div>