Question

I’m kind of a beginner at jquery, so I probably wouldn’t understand too much advanced stuff, but here’s the problem: when I try to select the nth-child(1), it selects the first one, as expected (I know I can use first child, but I don’t feel like it). However, if it’s changed to nth-child(2), nothing is selected. nth-child(3) selects Something2, and nth-child(5) selects something3. This is too much for me!

<div id="navigation">
    <a href="#">Something</a> <br />
    <a href="#">Something2</a> <br />
    <a href="#">Something3</a> <br />
</div>

<script>
$('#navigation').find(">:nth-child(1)").css("font-weight", "bold");
</script>

Answer 1

:nth-child(1) should be selecting the second element, as the index you pass in is zero based.

The problem is that your selector was including the <br /> tags, which isn’t expected (from my point of view).

HTML:

<div id="navigation">
    <a href="#">Something</a> <br />
    <a href="#">Something2</a> <br />
    <a href="#">Something3</a> <br />
</div>​

JavaScript:

$('#navigation').children().not('br').eq(1).css("font-weight", "bold");​

Live Demo