jQuery :nth-child() Selector

By: Bipin C Mathew 9 months ago

The  nth-child selector selects all elements that are nth-child of its parent. The div:nth-child(2) will select the second <div> inside any container that has two or more direct <div> children. if you wanted to get at the fourth list item, In that case, the appropriate selector would be nth-child(4). The Jquery implementation of the nth selector is derived from CSS specification.

Syntax   :nth-child(n|even|odd|formula)


<!doctype html>
	<html lang="en">
	  <meta charset="utf-8">
	  <title>first-child demo</title>
	  div {
	    float: left;
	  span {
	    color: blue;
	  <script src="https://code.jquery.com/jquery-3.4.1.js"></script>

$( "ul li:nth-child(3)" ).append( "<span> - 3rd!</span>" );


Let us talk!

We take the vision which comes from dreams and apply the magic of science and mathematics, adding the heritage of our profession and our knowledge to create a design.