jQuery :nth-of-type() Selector

Quiz

The :nth-of-type() selector in jQuery is used selects elements (of a specific type) 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 :nth-of-type() selector in jQuery −

:nth-of-type(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-of-type()" Selector to select the 2nd <li> element of its parent (<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-of-type(2)").css("background-color", "yellow");
        });
        </script>
</head>
<body>
    <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 second <li> element 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-of-type(odd)").css("background-color", "yellow");
          $("li:nth-of-type(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-last-child(3n+2) selects every third paragraph, starting at the 2nd paragraph −

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
          $("p:nth-of-type(3n+2)").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