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