Help understanding what nth-child is and what does it do?

JavaScript
1

Tell us what’s happening:
Ok I completed the challenge but I’m not fully understanding how this works code works.
Here’s how you would give the third element in each well the bounce class:

$(".target:nth-child(3)").addClass(“animated bounce”);
How does it know the to make the target bounce? What is nth-child? Wouldnt it make the child of the target 3 bounce instead or something?
What am I not understanding?

Your code so far

<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");
    $(".target:nth-child(3)").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>

Your browser information:

Your Browser User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.108 Safari/537.36.

Link to the challenge:
https://www.freecodecamp.org/challenges/target-a-specific-child-of-an-element-using-jquery

3

So, what i understood from your explanation is, you do not understand the concept of nth-child.

:nth-child(n) is called a CSS selector which you can use with class or id of an element.

let’s say there is a

elements in 2 divs. Basically what p:nth-child(2) , is it will select every p element which are second child of it’s parent element. Means from every div it will select 2nd p element. if you add another div with some p elements it will also select 2nd p from it as well because, you have defined it for p element. 
<div class="someClass">
   <p>Some text</p> 
   <p>Some text</p>
   <p>Some text</p>
</div>
<div class="someClass">
   <p>Some text</p> 
   <p>Some text</p>
   <p>Some text</p>
</div>

$(".target:nth-child(3)").addClass(“animated bounce”); so in this code, it will select 3rd button from it’s parent which is div with class Well. Coz you are targeting button with target class.

So, :nth-child(y) will Selects every x element that is the yth child of its parent.
Hope this clears the doubt.

You can learn more about CSS Selectors here

4

so how does it know to target the third child of the “well”

? It doesn’t even mention the well in the command.
$("#right-well").children().css(“color”, “orange”); You can see here $("#right-well") is the main topic, then it says .children() , so i know I’m about to do something to the child elements of the right well. then it says .css(“color”, "orange). so i know that I’m going to turn the child element of the “Well”
into the color orange. This is pretty straight forward and obvious. the same goes with .the .parent() class.

Now lets look at this nth child one
$(".target:nth-child(3)").addClass(“animated bounce”); when i read this code. Im expecting the child element of one of the target elements (doesnt specify with target 1 or target 2) to be changed. if im target one of the child elements of the “well”

? why doesnt it read even mention the well dev at all?
6

How does it know to target the third or nth child?
It just knows, it is programmed that way. Forget the jquery here you can have same effect using only css.

I know it is tricky. I also faced same problem in understanding at first. You need to write some different code and try nth-child selector on that. Forget the jquery part for now just try it out using css.

The way nth-child works is.

  1. for whatever element or class you use nth-child, first it will look for parent of that element or class associated element.
  2. After figuring out which element is the parent, it will look for nth-child of that parent element. Let’s say you have two divs with some images in it. You specify something like this
<div class="someClass">
  <img src=""> 
   <img src="">
   <img src="">
</div>
<div class="someClass>
   <img src=""> 
   <img src="">
   <img src="">
</div>
  1. When you use img:nth-child(2), first it will figure out the parent element of all img element. So here there are total 6 img element. 3 in first div and 3 in second div. So we have 2 parent element.
  2. Now it will search for nth child of it’s parent element. For us, it is 2nd child of both divs.
  3. Once it finds the nth-child then it will apply css or add class to that element.

Now, all i can say about why it works this way because it is already structured in a way that it will work as i stated above.

You just have to remember that, nth-child doesn’t means it will target child element of the selected element. It will find it’s parent element and then target it’s children.

In short it will target the same element you specified it for.
Hope this clears your doubt and if you still have any doubt you should try in codepen and see the changes by yourself.
Good Luck.

1 Like
7

thank you. i think that explains it clearer.
4