Open In App

jQuery :nth-child() Selector

Improve
Improve
Like Article
Like
Save
Share
Report

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

Syntax:

$("Selector:nth-child( index | even |odd |equation )")
  • 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: In this example, we are using the above-explained nth-child() selector.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>jQuery :nth-child() Selector</title>
    <script src=
    </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:

 


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