jQuery | :nth-child() Selector

Last Updated : 12 Mar, 2019

jQuery :nth-child() Selector Selects all elements that are the nth-child of their parent.

Syntax:

$("Element:nth-child(Index/even/odd/equation)")

Values:

Index: Index provided. Index starts from
even: even number of child elements get selected.
odd: odd number of child elements will get selected.
equation: select child elements by solving a formula(an+b).

Example:

<!DOCTYPE html>
<html>
  
<head>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
  </script>
    
    <script>
      $(document).ready(function() {
         $("p:nth-child(2n-1)").css("background-color", 
                                    "lightgreen");
        });
    </script>
</head>
  
<body>
  
    <p>GFG</p>
    <p>GFG</p>
    <p>GFG</p>
    <p>GFG</p>
    <p>GFG</p>
    <p>GFG</p>
    <p>GFG</p>
    <p>GFG</p>
    <p>GFG</p>
    <p>GFG</p>
    <p>GFG</p>
  
</body>
  
</html>

Output:

Attention reader! Don’t stop learning now. Get hold of all the important DSA concepts with the DSA Self Paced Course at a student-friendly price and become industry ready.

My Personal Notes

Related Articles