Open In App

jQuery :nth-of-type() Selector

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

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=
    </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=
    </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=
    </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=
    </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”.



Last Updated : 06 Jul, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads