The **`:nth-child()`** is a CSS pseudo-class selector that allows you to select elements based on the index (source order) inside their container.

> A ​**pseudo-class selector**  selects content based on its relationship with parent and sibling elements.

The `:nth-child()` takes only one argument as its input:

- A number, keyword, or formula specifying the *nth-child* we want to select.

Additionally, we can ​specify the HTML element whose child we want to select through the `:nth-child()` method. If no such element is specified, then the `:nth-child()` method applies the input argument to all the elements in the HTML.

# Syntax

# Codes
The following examples demonstrate different arguments passed to the `:nth-child()` method.
## 1. Using a number as the argument

/* Select the second element in each list */
li:nth-child(2) {
  background: lightsteelblue;
}

/* Other styling properties (not needed) */
body {
  padding: 1em 2em;
}
ul, ol {
  list-style: none;
  padding: 0;
}
li {
  text-align: center;
  line-height: 2;
  background: slategrey;
}
div {
  width: 12em;
  float: left;
  margin-right: 2em;
}

<html>
 <head>
 </head>
 <body>
   <div class="one">
    <ul>
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
        <li>Four</li>
    </ul>
    <ol>
        <li>Five</li>
        <li>Six</li>  
        <li>Seven</li>
        <li>Eight</li>
    </ol>
   </div>
 </body>
</html>

codemirror

/* Select every odd element in each list */
li:nth-child(odd) {
  background: lightsteelblue;
}

body {
  padding: 1em 2em;
}
ul, ol {
  list-style: none;
  padding: 0;
}
li {
  text-align: center;
  line-height: 2;
  background: slategrey;
}
div {
  width: 12em;
  float: left;
  margin-right: 2em;
}

/* Select every other element after the third element in the list */
li:nth-child(2n+3) {
  background: lightsteelblue;
}

body {
  padding: 1em 2em;
}
ul, ol {
  list-style: none;
  padding: 0;
}
li {
  text-align: center;
  line-height: 2;
  background: slategrey;
}
div {
  width: 12em;
  float: left;
  margin-right: 2em;
}

<html>
 <head>
 </head>
 <body>
   <div class="one">
    <ul>
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
        <li>Four</li>
        <li>Five</li>
        <li>Six</li>  
        <li>Seven</li>
        <li>Eight</li>
    </ul>
   </div>
 </body>
</html>

What is the nth-child() method in CSS?

Syntax

Codes

1. Using a number as the argument

2. Using a keyword as the argument

3. Using a formula as the argument