How to use :nth-child in CSS

The :nth-child pseudo-class allows to select one and more elements based on their source order.

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
</ul>

Let’s look at simple examples for how this can be do:

Select the first list item #

li:nth-child(1) {
  color: red;
}

Also, you can use first-child pseudo-class for this

li:first-child {
  color: red;
}

Select the 5th list item #

li:nth-child(5) {
  color: red;
}

Select every child elements whose index is odd #

li:nth-child(odd) {
  color: red;
}

Select every child elements whose index is even #

li:nth-child(even) {
  color: red;
}

Select every 3rd list item starting with first #

li:nth-child(3n — 2) {
  color: red;
}

Select every 3rd list item starting with 2nd #

li:nth-child(3n — 1) {
  color: red;
}

Select every 3rd child item #

li:nth-child(3n) {
  color: red;
}

Select the first three items of the list #

li:nth-child(-n+3) {
  color: red;
}

Select the last element of the list #

li:last-child {
  color: red;
}