CSS :nth-of-type(n)

The CSS :nth-of-type(n) pseudo-class matches elements based on their position among sibling elements of the same type within their parent. It allows you to style elements dynamically based on their order within the same type.

The syntax for the :nth-of-type(n) pseudo-class is:

</>
Copy
selector:nth-of-type(n) {
    property: value;
}

Where:

ParameterDescription
selectorThe element type to which the :nth-of-type pseudo-class will apply.
nA number, keyword, or formula specifying which elements to target (e.g., 2, odd, 2n).
propertyThe CSS property to style the element.
valueThe value assigned to the CSS property.

Common patterns for n include:

PatternDescription
2Targets the second element of the specified type.
oddTargets odd-numbered elements of the specified type (1st, 3rd, 5th, etc.).
evenTargets even-numbered elements of the specified type (2nd, 4th, 6th, etc.).
2nTargets every second element of the specified type.
2n+1Targets odd-numbered elements (same as odd).

Examples

1. Styling Every Second Paragraph

In this example, every second <p> element in a container is styled with gray text color.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        p:nth-of-type(2n) {
            color: gray;
        }
    </style>
</head>
<body>
    <div>
        <p>First paragraph.</p>
        <p>Second paragraph.</p>
        <p>Third paragraph.</p>
        <p>Fourth paragraph.</p>
    </div>
</body>
</html>

2. Highlighting Odd List Items

Here, odd-numbered <li> elements in an unordered list are styled with bold text.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        li:nth-of-type(odd) {
            font-weight: bold;
        }
    </style>
</head>
<body>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
    </ul>
</body>
</html>

3. Styling the Third Table Row

The third <tr> in a table is styled with a yellow background.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        tr:nth-of-type(3) {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <table border="1">
        <tr><td>Row 1</td></tr>
        <tr><td>Row 2</td></tr>
        <tr><td>Row 3</td></tr>
        <tr><td>Row 4</td></tr>
    </table>
</body>
</html>

4. Styling the First Heading of Each Type

The first <h1> and <h2> elements are styled with green text color.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        h1:nth-of-type(1), h2:nth-of-type(1) {
            color: green;
        }
    </style>
</head>
<body>
    <div>
        <h1>First H1</h1>
        <h2>First H2</h2>
        <h1>Second H1</h1>
        <h2>Second H2</h2>
    </div>
</body>
</html>

5. Styling Every Second Image in a Container

In this example, every second <img> element is styled with a red border.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        img:nth-of-type(2n) {
            border: 2px solid red;
        }
    </style>
</head>
<body>
    <div>
        <img src="image1.jpg" alt="Image 1" width="100">
        <img src="image2.jpg" alt="Image 2" width="100">
        <img src="image3.jpg" alt="Image 3" width="100">
        <img src="image4.jpg" alt="Image 4" width="100">
    </div>
</body>
</html>