CSS :nthchild() Selector (original) (raw)

CSS :nth-child() Selector

Last Updated : 11 Jul, 2025

The ****:nth-child() pseudo-class selector** targets elements based on their position among siblings, making it ideal for dynamic styling. It can select elements using specific positions (e.g., first, odd, or even), or patterns like An+B. This flexible CSS tool improves web design by simplifying how you apply styles to elements in lists, tables, or repetitive structures.

**Syntax

:nth-child(number) {
// CSS Property
}

Where,

**number: This represents the pattern for matching elements. It can be a specific number, odd, even, or a formula like An+B, where A defines the step size and B is an offset.
- **odd: Targets elements at odd positions (1, 3, 5, etc.) within their parent container.
- **even: Targets elements at even positions (2, 4, 6, etc.) among their siblings.
**Functional Notation (An+B): Matches elements whose positions follow the pattern An+B. Here, A is the interval (step size) and B is the offset.

**Example 1: The :nth-child(2n+1) selector is used to target every odd

element, applying a green background and white text. This effectively styles the first, third, fifth, and other odd list items.

HTML `

CSS :nth-child Selector Example

CSS :nth-child() Selector Example For odd lists

<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>

**Output

nth child odd list output

**Example 2: The :nth-child(2n) selector is used to target every even <li> element, applying a blue background and white text. This effectively styles the second, fourth, sixth, and other even list items.

HTML `

CSS :nth-child Selector Example

CSS :nth-child() Selector Example for Even Lists

<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>

**Output

nth child selector even list

The :nth-child() CSS selector helps you target specific elements based on their position, such as odd or even items. Mastering this selector allows for more dynamic and responsive web designs, improving layout flexibility and enhancing creativity in styling.

CSS :nthchild() Selector (original) (raw)