Why are we using "." notation even though target in this is an id

You’ve seen why id attributes are so convenient for targeting with jQuery selectors. But you won’t always have such neat ids to work with.

Fortunately, jQuery has some other tricks for targeting the right elements.

jQuery uses CSS Selectors to target elements. target:nth-child(n) css selector allows you to select all the nth elements with the target class or element type.

Here’s how you would give the third element in each well the bounce class:

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

Make the second child in each of your well elements bounce. You must target the children of element with the target class.

Why $("#target:nth-child(3)").addClass(“animated bounce”); doesn’t work? Even though target is an id.

First of all, what is the name of the challenge you are working on? When you say it does not work, what does it do instead? What exactly are you expecting $("#target:nth-child(3)").addClass(“animated bounce”); to do?

Hey bro.

It;s here https://www.freecodecamp.org/challenges/target-a-specific-child-of-an-element-using-jquery

Can you answer the other questions I had? I can not see your code unless you post it into the forum. To enter a code block into the forum, precede it with a line of three backticks and follow it with a line of three backticks to make easier to read. See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.


Oh sorry. Nothing happens actually

  $(document).ready(function() {
    $("#target1").css("color", "red");
    $("#target1").prop("disabled", true);
    $("#target1").parent().css("background-color", "red");
    $("#right-well").children().css("color", "orange");
        $('#target:nth-child(2)').addClass("animated bounce");


<!-- 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">
      <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 class="col-xs-6">
      <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>

Remember the # in the #target above means you are trying to first select an element with id=“target”. There are no elements with id=“target” in the html. There is however, several elements with class=“target”. If you changed your code to first select the elements with class=“target”, then adding the :nth-child(2) part, would select the 2nd child of the elements with class=“target” of each of their parents. So, it would target the 2nd child element of the div with id=“left-well” and the 2nd child element of the div with id=“right-well”.

So, you just need to figure out how to target all the elements with class=“target” and use that instead of the $("#target part of your code.

1 Like

Thanks :slight_smile: