Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

jQuery | :nth-of-type() Selector

  • Difficulty Level : Expert
  • Last Updated : 29 Nov, 2021

The :nth-of-type() is an inbuilt selector in jQuery, used to select all the nth-child elements of specified parent.
Syntax : 
 

 parent_name : nth-of-type(n|even|odd|algebraic equation)

Parameters: It takes a parameter n | even | odd | algebraic equation.

 

ValueDescription
nSelect the child present at nth index (starting from 1). n must be an integer.
evenSelects the child present at even index.
oddSelects the child present at odd index.
algebraic equationSelect 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 treated differently 
    i.e, indexing starts from beginning.
  • In mn + c, n is starting from value 0.

Example-1: Using n as a parameter. 
 

html




<!DOCTYPE html>
<html>
 
<head>
    <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>
    <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”.
 


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!