jQuery :nth-of-type() selector

This jQuery selector is used to select the elements that are the nth-child of a particular type of their parent.

We can use the :nth-child() selector to select the elements based on their position regardless of the type of their parent.

Syntax

The syntax of using the :nth-of-type 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-of-type() selector.

Example

In this example, we are using all parameter values of the :nth-of-type() selector. Here, there are many paragraph elements. The buttons will select the paragraph elements related to the values of the selector. Likewise, the first button will select the paragraph with index value 1, the second button will select odd paragraphs, the third button will select the even paragraphs, and the fourth button will select the paragraphs present at index value 3,6,9,…n.

<html>
<head>
<title> jQuery :nth-of-type() selector </title>

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

<h3> Welcome to the javaTpoint.com </h3>
<h4> It is an example of using the jQuery :nth-of-type() selector. </h4>

<p> Paragraph 1 </p>
<p> Paragraph 2 </p>
<p> Paragraph 3 </p>
<div style = "border: 2px solid black;"> This is a div element. 
<p> Paragraph 1 </p>
<p> Paragraph 2 </p>
<p> Paragraph 3 </p>
</div>
<p> Paragraph 4 </p>
<p> Paragraph 5 </p>
<p> Paragraph 6 </p>
<b> Click the following buttons to see the effect. </b>
</br> </br>
<button id = "n"> p:nth-of-type(1) </button>
<button id = "odd"> p:nth-of-type(odd) </button>
<button id = "even"> p:nth-of-type(even) </button>
<button id = "formula"> :nth-of-type(3n+3) </button>

<script>
$(document).ready(function(){
    $("#n").click(function () {
	$("p").css("background-color", "white");
    $("p:nth-of-type(1)").css("background-color", "yellow");    
    });
	
	$("#odd").click(function () {
	$("p").css("background-color", "white");
    $("p:nth-of-type(odd)").css("background-color", "lightgray");    
    });
	
	$("#even").click(function () {
	$("p").css("background-color", "white");
    $("p:nth-of-type(even)").css("background-color", "lightgreen");    
    });
	
	$("#formula").click(function () {
    $("p").css("background-color", "white");
	$("p:nth-of-type(3n+3)").css("background-color", "lightblue");    
	
    });
	
	});
</script>

</body>
</html>

Test it Now

Output

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