Widely available Supported across all major browsers. Safe to use in production.

:nth-child()

The :nth-child() CSS pseudo-class matches elements based on the indexes of the elements in the child list of their parents. In other words, the :nth-child() selector selects child elements according to their position among all the sibling elements within a parent element.

Selectors

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
:nth-child
1
12
3.5
3.1
18
2
Other
css.selectors.first-child

`:first-child`
4
12
3
3.1
18
4
CSS selector
no parent required

Matches elements with no parent
57
79
52
57
Other
css.selectors.last-child

`:last-child`
1
12
1
3.1
18
2
CSS selector
no parent required

Matches elements with no parent
57
79
52
57
no parent required

Matches elements with no parent
57
79
52
57
Other
css.selectors.nth-last-child

`:nth-last-child()`
4
12
3.5
3.1
18
2
CSS selector
no parent required

Matches elements with no parent
57
79
52
57
Other
css.selectors.only-child

`:only-child`
2
12
1.5
3.1
18
2
CSS selector
no parent required

Matches elements with no parent
57
79
52
17
57
17
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

CSS 
tr:nth-child(even) {
  background-color: #f5f5f5;
}
li:first-child {
  font-weight: bold;
}
.grid > :nth-child(3n) {
  margin-right: 0;
}

Live demo

even rowhilight

CSS even rowhilight demo.

PreviewFullscreen

first. child emphasis

CSS first. child emphasis demo.

PreviewFullscreen

3nth. style

CSS 3nth. style demo.

PreviewFullscreen

Use cases

  • Using :nth-child()

    The :nth-child() CSS pseudo-class matches elements based on the indexes of the elements in the child list of their parents.

Cautions

  • May not be supported in older browsers.

Accessibility

  • Make sure visual changes are conveyed appropriately to assistive technology.

Related links