CSS :nth-child() Selector

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 <li> element, applying a green background and white text. This effectively styles the first, third, fifth, and other odd list items.

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.

Output

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.

Supported Browsers

• Google Chrome 5.0
• Edge 12
• Mozilla 4.0
• Safari 5.0
• Opera 11.1