:nth-child Pseudo Class

:nth-child CSS Pseudo Class

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The :nth-child pseudo-class in CSS is a structural pseudo-class used to select elements based on their position within a parent element. Unlike classes or IDs, which are explicitly assigned to elements, :nth-child relies on the element’s order among its siblings. This makes it particularly useful for styling lists, tables, or repeated elements without adding extra markup. The syntax for this pseudo-class allows for a wide range of selection patterns, including numeric, formulaic, and keyword-based approaches.

A basic example of :nth-child is selecting every second item in a list:

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

li:nth-child(2n) {
  background-color: lightblue;
}

In this example, every even <li> element receives a light blue background. The 2n formula here indicates "every second element," while 2n+1 would select all odd elements. You can also use exact numbers, like li:nth-child(3) to select only the third child.

The :nth-child pseudo-class can be combined with other selectors for more precise targeting. For instance, if you want to style only the <li> elements that are direct children of a specific <ul>:

ul > li:nth-child(3n) {
  font-weight: bold;
}

Here, every third child <li> of the <ul> is bolded. This works seamlessly with other CSS properties, such as color, background-color, or margin.

An important nuance is that :nth-child counts elements of all types within the parent unless combined with a type selector. For example, p:nth-child(2) selects a <p> element only if it is the second child of its parent, not just the second <p>. If you want to select every second <p> regardless of other elements, you might need :nth-of-type.

Another handy use of :nth-child is alternating row colors in tables:

<table>
  <tr><td>Row 1</td></tr>
  <tr><td>Row 2</td></tr>
  <tr><td>Row 3</td></tr>
  <tr><td>Row 4</td></tr>
</table>

tr:nth-child(even) {
  background-color: #f2f2f2;
}

This gives a striped table effect, improving readability. You can also combine it with pseudo-classes like :hover to create dynamic hover effects on alternate rows.

Overall, :nth-child is a powerful, flexible pseudo-class that allows developers to target elements with precision based purely on their position, reducing the need for extra classes or JavaScript for styling purposes.

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

<ul class="item-list">

  <li>First Item</li>

  <li>Second Item</li>

  <li>Third Item</li>

  <li>Fourth Item</li>

  <li>Fifth Item</li>

  <li>Sixth Item</li>

</ul>

CSS

/* 1. Select exactly the second item */

.item-list li:nth-child(2) {

  background-color: #ffd700;

  font-weight: bold;

}



/* 2. Select every "even" item (2, 4, 6...) */

/* This is great for zebra-striping tables or lists */

.item-list li:nth-child(even) {

  color: #2c3e50;

  border-left: 5px solid #3498db;

}



/* 3. Using a formula: 3n (Every 3rd item) */

/* This selects 3, 6, 9, etc. */

.item-list li:nth-child(3n) {

  text-decoration: underline;

}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS :nth-child pseudo class. Hover over a browser icon to see the version that first introduced support for this CSS psuedo class.