:nth-child CSS Pseudo Class


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.


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


  • 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.


table { 
width: 100%;
border-collapse: collapse;
border-spacing: 0;
tr:nth-child(2n) {
background: #a3ffa8;
tr:nth-child(1) {
background: #001aad;
color: #fff;

Browser Support

The following table will show you the current browser support for the CSS :nth-child pseudo class.

Edge Chrome Firefox Opera Safari
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview

Last updated by CSSPortal on: 1st October 2023