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

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

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


#2

According to the jQuery documentation for :nth-child() Selector, it selects all elements that are the nth-child of their parent.

In your code above, the following line selects all the elements with a class=“target” which are the 3rd child of their parent.

$(".target:nth-child(3)").addClass("animated bounce");

There are two parents which have children elements with class=“target”. One is <div class="well" id="left-well"> and the other is <div class="well" id="right-well">. So, the third button (3rd child of parent) of each well gets selected and then the “animated bounce” class is added which causes them to bounce.

.


#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


Question about jquery targeting specific child element
#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?

#5

The divs with class=“well” are the parents of the elements (buttons in this case) with the “target” class in them. Maybe you are thinking that the word “target” is a special key word? I believe @pandaa880 does a great job showing a different example without using the class “target”. He selects the 3rd p element of each parent. The parents in his example are divs with class=“someClass”. If we use his example code above and wanted to add the “animated bounce” class to the 3rd p element of each parent, we would write:

<script>
  $(document).ready(function() {
    $("p:nth-child(3)").addClass("animated bounce");
  });
</script>

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

There is no mention of the parent classes (“someClass”), because the nth-child selector knows to seek within elements of the nearest parent element.

See the official jQuery documentation for nth-child selector for more examples.


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


#7

thank you. i think that explains it clearer.
4