:nth-child CSS Pseudo Class

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

Description

The CSS :nth-child pseudo-class selector allows you to select elements based on their position among their siblings. The selector takes a numerical argument, which represents the position of the element among its siblings. For example, :nth-child(1) selects the first child element, :nth-child(2) selects the second child element, and so on.

The :nth-child selector can be used to style elements in a variety of ways. For example, you could use it to style the first and last child elements of a list differently, or to style all the even-numbered child elements of a grid differently.

Here are some examples of how to use the :nth-child pseudo-class selector:

/* Style the first child element of a list */

li:nth-child(1) {

  color: red;

}



/* Style the last child element of a list */

li:nth-child(last-child) {

  font-weight: bold;

}



/* Style all the even-numbered child elements of a grid */

.grid > div:nth-child(even) {

  background-color: #ccc;

}

The :nth-child pseudo-class selector is a powerful tool for styling elements based on their position among their siblings. It can be used to create a variety of different effects, and is a valuable addition to any CSS developer's toolkit.

Syntax

element:nth-child (odd | even | <number> | <expression>) {
  /* ... */
}

Values

oddAll odd item numbers.
evenAll even item numbers.
<number>The serial number of the child relative to its parent. Numbering starts with 1, this will be the first item in the list.
<expression>It is given in the form an ± b , where a and b are integers, and n is a counter that automatically takes the value 0, 1, 2 ...

If a is zero, then it is not written and the record is reduced to b. If b is zero, then it is also not specified and the expression is written in the form an. a and b can be negative numbers, in which case the plus sign changes to minus, for example: 5n-1.
By using negative values of a and b, some results can also turn out to be negative or equal to zero. However, elements are affected only by positive values due to the numbering of elements starting at 1.

Example

HTML

<table>

  <tr>

    <td>No</td>

    <td>Competition</td>

    <td>John</td>

    <td>Adam</td>

    <td>Robert</td>

    <td>Paul</td>

  </tr>

  <tr>

    <td>1</td>

    <td>Swimming</td>

    <td>1:30</td>

    <td>2:05</td>

    <td>1:15</td>

    <td>1:41</td>

  </tr>

  <tr>

    <td>2</td>

    <td>Running</td>

    <td>15:30</td>

    <td>14:10</td>

    <td>15:45</td>

    <td>16:00</td>

  </tr>

  <tr>

    <td>3</td>

    <td>Shooting</td>

    <td>70%</td>

    <td>55%</td>

    <td>90%</td>

    <td>88%</td>

  </tr>

</table>

CSS

table { 

   width: 100%; 

   border-collapse: collapse;

   border-spacing: 0; 

} 

tr:nth-child(2n) { 

   background: #a3ffa8; 

} 

tr:nth-child(1) { 

   background: #001aad; 

   color: #fff;

}

Result

Editor