Trouble understanding parent/child logic on "Target a Specific Child of an Element Using jQuery" challenge

Trouble understanding parent/child logic on "Target a Specific Child of an Element Using jQuery" challenge
0

#1

Yo,
I have the challenge figured out (Target a Specific Child of an Element Using jQuery), however I can’t understand why what is happening happens.
The challenge requires one to use jQuery to select the "2nd child with the class of target."
The solution is below (spoiler alert?) with an arrow distinguishing the line being the hot spot of focus at the moment (it is otherwise formatted correctly, I’m just not sure how better to bring it to attention on a forum hah) :

<script>
  $(document).ready(function() {
    $("#target1").css("color", "red");
    $("#target1").prop("disabled", true);
    $("#target4").remove();
    $("#target2").appendTo("#right-well");
    $("#target5").clone().appendTo("#left-well");
    $("#target1").parent().css("background-color", "red");
    $("#right-well").children().css("color", "orange");

   This line here--> $(".target:nth-child(2)").addClass("animated bounce");

  });
</script>

<!-- Only change code above this line. -->

<div class="container-fluid">
  <h3 class="text-primary text-center">jQuery Playground</h3>
  
  <div class="row">
    
    <div class="col-xs-6">
      
      <h4>#left-well</h4>
      
      <div class="well" id="left-well">
        
        <button class="btn btn-default target" id="target1">
          #target1
        </button>
        
        <button class="btn btn-default target" id="target2">
          #target2
        </button>
        
        <button class="btn btn-default target" id="target3">
          #target3
        </button>
        
      </div>
      
    </div>
    
    <div class="col-xs-6">
      <h4>#right-well</h4>
      
      <div class="well" id="right-well">
        <button class="btn btn-default target" id="target4">#target4</button>
        <button class="btn btn-default target" id="target5">#target5</button>
        <button class="btn btn-default target" id="target6">#target6</button>
      </div>
    </div>
  </div>
</div>

As I understand what jQuery is doing at the moment, its like saying in English “any 2nd child that also has the name of target.” My translation of the logic into English may be incorrect because when I change the class from .target to .well under my definition, I get confused.
This code registers each “.well” as a 2nd child, not as a 1st child (which I would assume would be the case because I see each .well as an only child.) Why does this happen? I don’t see a 1st child in relation to the .well classes that would explain their being selected as a 2nd child. However in relation to the class “.target” you clearly see each 1st child and understand how the 2nd child is a 2nd child.
I hope I could articulate my thoughts WELL enough… haha. Thanks guys.


#2

The wells are the second child because the first child of its parent(the nearest div) are the h4 tags. If you remove the h4 tag, they become the first child. If you add another tag before them, the wells become the 3rd child. If you wrap them into another div like this:

 < div> 
  < div class=well></div> 
 < /div> 

They become the first child


#3

HEY, I think I figured out your problem.
See the class target is applied 6 times(i.e. on all buttons).
So when we use $(".target:nth-child(3)").addClass(“animated bounce”); we are targetting the 3rd child that has the class ‘.target’…
I hope this makes things clear.