:nth-child()Baseline · Widely available

The :nth-child() and :nth-last-child() CSS functional pseudo-classes match elements based on their index within a list of elements. The :first-child and :last-child pseudo-classes match the first and last element in a list, and the :only-child pseudo-class matches an element with no siblings.

Supported in all major browsers for at least 30 months — safe to use without fallbacks. Baseline since Jul 29, 2015. Widely available since Jan 29, 2018.

How to use ↓Compare browsers

Browser support

DesktopChrome

1+Supportedsince Dec 11, 2008

Current: 155

Edge

12+Supportedsince Jul 29, 2015

Current: 154

Firefox

1–3Not supported

3.5+Supportedsince Jun 30, 2009

Current: 157

Safari

1–3Not supported

3.1+Supportedsince Mar 18, 2008

Current: 27

MobileChrome Android

18+Supportedsince Jun 27, 2012

Current: 155

Firefox Android

4+Supportedsince Mar 29, 2011

Current: 157

Safari iOS

1–1Not supported

2+Supportedsince Jul 11, 2008

Current: 27

How to use

This feature is Baseline widely available — use it freely, no fallback needed.

Example

Full syntax and examples are on MDN: :first-child.

Feature detection

CSS · check before using

@supports selector(:nth-child(*)) {
  /* styles that use :nth-child(*) */
}

/* or in JavaScript */
if (CSS.supports("selector(:nth-child(*))")) {
  // use it
}

Documentation (MDN)

Specification

Sub-features

Support for each part of the feature (10). The overall table above shows when the whole feature works.

Sub-feature	Chrome	Edge	Firefox	Safari	Chrome Android	Firefox Android	Safari iOS
first-child	4	12	3	3.1	18	4	4
first-child.no_parent_required	57	79	52	✕	57	52	✕
last-child	1	12	1	3.1	18	4	2
last-child.no_parent_required	57	79	52	✕	57	52	✕
nth-child	1	12	3.5	3.1	18	4	2
nth-child.no_parent_required	57	79	52	✕	57	52	✕
nth-last-child	4	12	3.5	3.1	18	4	2
nth-last-child.no_parent_required	57	79	52	✕	57	52	✕
only-child	2	12	1.5	3.1	18	4	2
only-child.no_parent_required	57	79	52	17	57	52	17