nth-child() Selector

Estimated reading: 1 minute 17 views

The :nth-child(n) selector matches every element that is the nth child of its parent.

n can be a number, a keyword (odd or even), or a formula (like an + b).

Tip: Look at the :nth-of-type() selector to select the element that is the nth child, of the same type (tag name), of its parent.

/* Selects the second element of div siblings */
div:nth-child(2) {
  background: red;
}

/* Selects the second li element in a list */
li:nth-child(2) {
  background: lightgreen;
}

/* Selects every third element among any group of siblings */
:nth-child(3) {
  background: yellow;
}
Share this Doc

nth-child() Selector

Or copy link