Nth Child

Pseudo-class

:nth-child(n)

Selects elements based on their position among siblings. Supports formulas like 2n (even), 2n+1 (odd), 3n.

Example

tr:nth-child(even) {
  background: #f5f5f5;
}
li:nth-child(3n) {
  color: red;
}

Specificity

0-1-0

Browser Support

All browsers

About the Nth Child

The :nth-child(n) CSS selector belongs to the Pseudo-class category.Selects elements based on their position among siblings. Supports formulas like 2n (even), 2n+1 (odd), 3n. Understanding CSS selector specificity and combinators is essential for writing maintainable stylesheets that behave predictably.

The specificity of this selector is 0-1-0. CSS specificity determines which styles are applied when multiple rules target the same element. Higher specificity values take precedence. The specificity hierarchy from lowest to highest is: universal (*) → type/element → class/attribute/pseudo-class → ID → inline styles → !important.

Browser support for Nth Child is: All browsers. When using newer CSS selectors like :has(), :is(), or CSS nesting, consider providing fallback styles for older browsers. Use @supports to progressively enhance your stylesheets with modern features while maintaining backward compatibility.

Related Selectors

:nth-last-child(n):nth-of-type(n):first-child