Question

Hi please look at the HTML below. I am trying to use jQuery to get every 3rd instance on the DIVs with class="box" contained within the DIV with class="entry" to have a no right hand margin:

My HTML code:

<div class="entry">

    <div class="box">
        SOME HTML....
    </div><!-- end .box -->

    <div class="box">
        SOME HTML....
    </div><!-- end .box -->

    <div class="box">
        SOME HTML....
    </div><!-- end .box I Want to remove right hand margin on this div -->

    <div class="box">
        SOME HTML....
    </div><!-- end .box -->

    <div class="box">
        SOME HTML....
    </div><!-- end .box -->

    <div class="box">
        SOME HTML....
    </div><!-- end .box I Want to remove right hand margin on this div -->

    <div class="box">
        SOME HTML....
    </div><!-- end .box -->

    <div class="box">
        SOME HTML....
    </div><!-- end .box -->

    <div class="box">
        SOME HTML....
    </div><!-- end .box I Want to remove right hand margin on this div -->

    </div>
    <!--end entry-->

My attempt with jQuery:

   <script>
        $(document).ready(function(){
            $("div.entry:nth-child(3)").css("margin", "0px");
        });
   </script>

I can’t get this working can anyone please help? Thanks in advance!

---

thanks to all who helped the solution provided is indeed correct. I am coding up a supplied template and found that JQuery had been set to run in compatibility mode hence $ was the problem.

Answer 1

From the docs (my emphasis)

Matches all elements that are the nth-child of their parent or that are the parent’s even or odd children.

You’re currently selecting the parent, while you should be selecting children:

$("div.entry > div:nth-child(3)").css("margin", "0px");