Target a Specific Child of an Element Using jQuery: Not actually targeting child?

It seems like when we use :nth-child(n), we are not actually referring to the children of the targeted element but rather the element itself. Why the confusion or what am I missing?

Example:
$(".target:nth-child(3)") 

Expected behavior:
// the third child of the element with the class .target is selected

Actual behavior:
// targets third element with class target

Your code looks correct assuming you have html that looks something like this:

<ul class=".target">
<li>one</li>
<li>two</li>
<li>three</li>
</ul>

Your jQuery should target the third li

Pseudo-classes (like nth-child) always target the element they’re attached to. Here the nth-child(3) pseudo-class is attached to .target, which selects all .target elements that are the third children of their respective parent elements.

1 Like