jQuery :nth-child() Selector

Quiz

The :nth-child() Selector in jQuery is used selects elements that are the nth child of their parent.

This method allows you to select elements based on their position within their parent element's list of children, using "Indexing" and "Formula" parameters.

Syntax

Following is the syntax of jQuery :nth-child() Selector −

:nth-child(n|even|odd|formula)

Parameters

Here is the description of the above syntax −

n: Selects the nth child element of its parent. Indexing starts from 1, not 0.
even|odd: Selects even-numbered and odd-numbered child elements, respectively.
formula: Selects elements based on a mathematical formula (an+b). "a" and "b" are integers.

Example 1

In the following example, we are using the jQuery :nth-child() Selector to select the 2nd <li> element in the <ul> −

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
          $("li:nth-child(2)").css("background-color", "yellow");
        });
        </script>
</head>
<body>
    <h2>List Example</h2>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
    </ul>
</body>
</html>

After executing the above program, the <li> that is the second child of its parent (<ul>) will be highlighted with yellow background color.

Example 2

In this example, we are using the "odd" and "even" parameters to select both odd and even child (<li>) elements −

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
          $("li:nth-child(odd)").css("background-color", "yellow");
          $("li:nth-child(even)").css("background-color", "lightblue");  
        });
    </script>
</head>
<body>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
        <li>Item 6</li>
    </ul>
</body>
</html>

After executing the program, the odd-numbered list items will be highlighted with yellow background color and even-numbered items to light blue.

Example 3

The p:nth-child(3n+1) selects every first and subsequent third paragraph within the <div> element −

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
          $("p:nth-child(3n+1)").css("background-color", "yellow");
        });
    </script>
</head>
<body>
<div>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
    <p>Paragraph 3</p>
    <p>Paragraph 4</p>
    <p>Paragraph 5</p>
    <p>Paragraph 6</p>
    <p>Paragraph 7</p>
    <p>Paragraph 8</p>
</div>
</body>
</html>

After executing the above program, the selected elements will be highlighted with yellow background color.

jquery_ref_selectors.htm

Print Page