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

:nth-child()

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.

Selectors

Overview

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.

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
:first-child
4
12
3
3.1
18
4
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
Other
css.selectors.nth-child

`:nth-child()`
1
12
3.5
3.1
18
2
CSS selector
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() 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.

Cautions

  • May not be supported in older browsers.

Accessibility

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

Related links

Powered by web-features