-->

jQuery :nth-child() Selector

By: Bipin C Mathew 4 months, 3 weeks 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)

Example

<!doctype html>
	<html lang="en">
	<head>
	  <meta charset="utf-8">
	  <title>first-child demo</title>
	  <style>
	  div {
	    float: left;
	  }
	  span {
	    color: blue;
	  }
	  </style>
	  <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
	</head>
	<body>
	<div>
	  <ul>
	    <li>Sibin</li>
	    <li>Jobby</li>
	    <li>Bobby</li>
	  </ul>
	</div>
	<div>
	  <ul>
	    <li>Sam</li>
	  </ul>
	</div>
	<div>
	  <ul>
	    <li>Kevin</li>
	    <li>Shorn</li>
	    <li>Ginu</li>
	    <li>Midhun</li>
  </ul>
</div>

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

Comments

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.