CSS :nth-child(n)

The CSS :nth-child(n) pseudo-class matches elements based on their position within their parent. It allows styling elements dynamically based on their index, starting from 1. You can use formulas to target specific patterns of child elements.

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

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

Where:

ParameterDescription
selectorThe element you want to target.
nA number, keyword, or formula that specifies which child elements to style (e.g., 2, odd, 2n).
propertyThe CSS property to apply.
valueThe value assigned to the CSS property.

Common patterns for n include:

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

Examples

1. Targeting Every Second List Item

In this example, every second <li> in an unordered list is styled with a gray background.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        li:nth-child(2n) {
            background-color: lightgray;
        }
    </style>
</head>
<body>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
    </ul>
</body>
</html>

2. Styling Odd Table Rows

Here, odd-numbered rows of a table are given a lightblue background.

index.html

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

3. Highlighting the Third List Item

The third <li> in a list is styled with bold text.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        li:nth-child(3) {
            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>

4. Styling the First Child in Every 3 Elements

Here, every third child starting from the first is styled with a red text color.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        li:nth-child(3n+1) {
            color: red;
        }
    </style>
</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>

5. Styling Even Divs

In this example, every even <div> inside a parent container is styled with a lightgreen background.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        div:nth-child(even) {
            background-color: lightgreen;
        }
    </style>
</head>
<body>
    <div>Div 1</div>
    <div>Div 2</div>
    <div>Div 3</div>
    <div>Div 4</div>
</body>
</html>