jQuery - element selecting with :nth-child(2) and :even

1

Hi guys,

The following I do not understand.

$(".target:nth-child(2)").addClass("animated bounce");
$(".target:even").addClass("animated shake");

The first line makes the second button bounce
and the second line makes the first and the third bounce (because it starts with 0 position because 0 is an even number and this targets the first button and then position 2 targets the third button.)

Now my question is. Why is the first line not targeting the third button then? Because 0 targets the first, 1 targets the second and 2 targets the third in :even

2

According to the jQuery docs:

Because jQuery’s implementation of :nth- selectors is strictly derived from the CSS specification, the value of n is “1-indexed”, meaning that the counting starts at 1. For other selector expressions such as :eq() or :even jQuery follows JavaScript’s “0-indexed” counting. Given a single <ul> containing two <li>s, $( "li:nth-child(1)" ) selects the first <li> while $( "li:eq(1)" ) selects the second.

3

Thank you. Now it makes sense. Would be easier though if they would be all 0-indexed I think.