jQuery :nth-child selector

The :nth-child() selector is used to match the elements based on their position regardless of the type of its parent. This selector is used to match the elements based on their position within a group of siblings. It matches each element, which is the nth-child.

We can use the :nth-of-type selector if we have to select the elements that are the nth-child of a particular type of their parent.

Syntax

The syntax of using the :nth-child selector is given as follows.

Parameter values

The values mentioned in the above syntax are defined as follows.

n: The n in the above syntax must be an integer. It represents the index of each child to match. This parameter indicates the selector to select the child present at the specified index value. The index number of the first element is 1.

odd: It selects every odd child element.

even: It selects every even child element.

formula: It selects the child element present at the value of the formula. The formula for finding the different children is an+b.

If we consider a = 2 and b = 1, the formula will be 2n+1, which will only select the elements present at the index value 1, 3, 5, ..…index. To solve the formula, we can put the value of n as 0, 1, 2, ….n.

Now, let's see an example of using all the parameter values of the :nth-child selector.

Example

In this example, we are using all parameter values of the :nth-child selector. There are ten list items starting from 1 to 10, and four buttons named as :nth-child(7), Odd, Even, and nth-child(4n+4). The first button will select the list item with index number 7, the second button will select the odd list items, the third button will select the even list items, and the fourth button will select the list items present at index value 4 and 8.

We have to click the given buttons to see the effect.

<html>
<head>
<title> jQuery :nth-child selector </title>

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>

<h1> Welcome to the javaTpoint.com </h1>
<h2> It is an example of using the jQuery :nth-child selector. </h2>
<ul>
	<li> 1 </li>
	<li> 2 </li>
	<li> 3 </li>
	<li> 4 </li>
	<li> 5 </li>
	<li> 6 </li>
	<li> 7 </li>
	<li> 8 </li>
	<li> 9 </li>
	<li> 10 </li>
</ul>
<br/>

<p> Click the following buttons to see the effect. </p>
<button id = "n"> :nth-child(7) </button>
<button id = "odd"> Odd </button>
<button id = "even"> Even </button>
<button id = "formula"> :nth-child(4n+4) </button>

<script>
$(document).ready(function(){
    $("#n").click(function () {
    $("li:nth-child(7)").css("background-color", "yellow");    
    });
	
	$("#odd").click(function () {
	$("li").css("background-color", "white");
    $("li:nth-child(odd)").css("background-color", "orange");    
    });
	
	$("#even").click(function () {
	$("li").css("background-color", "white");
    $("li:nth-child(even)").css("background-color", "lightgreen");    
    });
	
	$("#formula").click(function () {
    $("li").css("background-color", "white");
	$("li:nth-child(4n+4)").css("background-color", "lightblue");    
	
    });
	
	});
</script>

</body>
</html>

Test it Now

Output:

After the execution of the above code, the output will be -