jQuery :nth-of-type() Selector
Last Updated :
06 Jul, 2023
The :nth-of-type() is an inbuilt selector in jQuery, used to select all the nth-child elements of the specified parent.
Syntax:
parent_name : nth-of-type(n|even|odd|algebraic equation)
Parameters: It takes a parameter n | even | odd | algebraic equation.
| Value | Description |
|---|
| n | Select the child present at nth index (starting from 1). n must be an integer. |
|---|
| even | Selects the child present at even index. |
|---|
| odd | Selects the child present at odd index. |
|---|
| algebraic equation | Select the child present at the value of the equation, equation should be of type mn + c or mn - c, where m and c are constant values. |
|---|
Note:
- Child elements in different sections or divisions are treated differently
i.e, indexing starts from the beginning. - In mn + c, n is starting from value 0.
Example 1: Using n as a parameter.
HTML
<!DOCTYPE html>
<html>
<head>
<title>jQuery :nth-of-type() Selector</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script>
$(document).ready(function () {
$("p:nth-of-type(2)").css(
"color", "green");
});
</script>
</head>
<body>
<p>Geeks 1</p>
<p>Geeks 2</p>
<section>
<!--Indices of child elements start
from beginning inside new section-->
<p>geeks for geeks 1</p>
<p>geeks for geeks 2</p>
<p>geeks for geeks 3</p>
</section>
<!--Outside the section the index of
the child element remain same as
before section tag-->
<p>Geeks 3</p>
</body>
</html>
Output:
In the above example, child element at index 2 (parent is p tag) formatted into green color i.e. "Geeks 2" and "geeks for geeks 2".
Example 2: Using even as a parameter.
HTML
<!DOCTYPE html>
<html>
<head>
<title>jQuery :nth-of-type() Selector</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script>
$(document).mouseover(function () {
$("p:nth-of-type(even)").css(
"background-color", "green");
});
</script>
</head>
<body>
<p>Geeks 1</p>
<p>Geeks 2</p>
<section>
<!--Indices of child elements start
from beginning inside new section-->
<p>geeks for geeks 1</p>
<p>geeks for geeks 2</p>
<p>geeks for geeks 3</p>
</section>
<!--Outside the section the index of the
child element remain same as before
section tag-->
<p>Geeks 3</p>
</body>
</html>
Output:
In the above example, child element at even indices (parent is p tag) formatted into green color background i.e. "Geeks 2" and "geeks for geeks 2".
Example 3: Using odd as a parameter.
HTML
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script>
$(document).mouseover(function () {
$("p:nth-of-type(odd)").css(
"color", "red");
});
</script>
</head>
<body>
<p>Geeks 1</p>
<p>Geeks 2</p>
<section>
<!--Indices of child elements
start from beginning inside new section-->
<p>geeks for geeks 1</p>
<p>geeks for geeks 2</p>
<p>geeks for geeks 3</p>
</section>
<!--Outside the section the index
of the child element remain
same as before section tag-->
<p>Geeks 3</p>
</body>
</html>
Output:
In the above example, child element at odd indices (parent is p tag) formatted into red colour i.e. "Geeks 1", "geeks for geeks 1", "geeks for geeks 3" and "Geeks 3".
Example 4: Using algebraic equation as a parameter.
HTML
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script>
$(document).mouseover(function () {
$("p:nth-of-type(3n+2)").css(
"color", "green");
});
</script>
</head>
<body>
<p>Geeks 1</p>
<p>Geeks 2</p>
<section>
<!--Indices of child elements
start from beginning inside
new section-->
<p>geeks for geeks 1</p>
<p>geeks for geeks 2</p>
<p>geeks for geeks 3</p>
<p>geeks for geeks 4</p>
<p>geeks for geeks 5</p>
</section>
<!--Outside the section the index
of the child element remain
same as before section tag-->
<p>Geeks 3</p>
</body>
</html>
Output:
In the above example, child element at indices value equal to 3n + 2 (parent is p tag) formatted into green colour i.e. "Geeks 2", "geeks for geeks 2", "geeks for geeks 5".
Similar Reads
jQuery * Selector The jQuery * selector selects all the elements in the document, including HTML, body, and head. If the * selector is used together with another element then it selects all child elements within the element used. Syntax: $("*")Parameters: *: This parameter is used to select all elements.Example 1: Se
1 min read
jQuery #id Selector jQuery is an open-source JavaScript library that simplifies the interactions between an HTML/CSS document, or more precisely the Document Object Model (DOM), and JavaScript. Elaborating on the terms, it simplifies HTML document traversing and manipulation, browser event handling, DOM animations, Aja
1 min read
jQuery .class Selector The jQuery .class selector specifies the class for an element to be selected. It should not begin with a number. It gives styling to several HTML elements. Syntax: $(".class") Parameter: class: This parameter is required to specify the class of the elements to be selected.Example 1: In this example,
1 min read
jQuery multiple classes Selector The jQuery multiple class selector is used to select multiple classes of an HTML document. Syntax: $(".class1, .class2, .class3, ...")Parameter: class: This parameter is required to specify the class of the elements to be selected.Example 1: In this example, we will select the multiple classes by us
1 min read
jQuery element Selector jQuery is an open-source JavaScript library that simplifies the interactions between an HTML/CSS document, or more precisely the Document Object Model (DOM), and JavaScript. Elaborating the terms, it simplifies HTML document traversing and manipulation, browser event handling, DOM animations, Ajax i
1 min read
jQuery multiple elements Selector The jQuery multiple elements Selector is used to select multiple elements of an HTML document. Syntax: $("element1, element2, element3, ...")Parameter: element: This parameter is required to specify the elements to be selected.Example 1: In this example, we will select the multiple elements by using
1 min read
jQuery :first Selector The jQuery :first Selector is used to select the first element of the specified type. Syntax: $(":first")Example 1: In this example, we will select the first <p> element by using jQuery :first Selector. HTML <!DOCTYPE html> <html> <head> <script src= "https://ajax.goo
1 min read
jQuery :last Selector The jQuery :last Selector is used to select the last element of the specified type. Syntax: $(":last")Example 1: In this example, we will select the last <p> element by using jQuery :last Selector. HTML <!DOCTYPE html> <html> <head> <script src= "https://ajax.googleap
1 min read
jQuery :even Selector jQuery is an open-source JavaScript library that simplifies the interactions between an HTML/CSS document, or more precisely the Document Object Model (DOM), and JavaScript. Elaborating on the terms, it simplifies HTML document traversing and manipulation, browser event handling, DOM animations, Aja
2 min read
jQuery :odd Selector jQuery is an open-source JavaScript library that simplifies the interactions between an HTML/CSS document, or more precisely the Document Object Model (DOM), and JavaScript. Elaborating the terms, it simplifies HTML document traversing and manipulation, browser event handling, DOM animations, Ajax i
2 min read