jQuery has :nth-child() Selector that can be used to select all nth-childs of their parent and apply the style to those elements.
We can pass similar parameters as we pass in CSS. Such as the index of the child element child (starting with 1) or the string odd/even, or even an equation for eg. :nth-child(even), :nth-child(2n).
jQuery strictly implements :nth- selectors directly from the CSS specification, so the value of n is “1-indexed”, which means that the counting of child elements starts at 1.
Other jQuery methods like .first() or .eq() follows “0-indexed” counting that is derived from JavaScript.
This is how we can select the first element:
...
$( "li:nth-child(1)");
...
With :nth-child(n), all children are counted and the specified element is selected only if it matches the selector attached to the pseudo-class.
Examples:
Find the second li in each matched ul and change the color.
Credit: jQuery Docs
child css selectors elements examples nth-child style
