:nth-of-type 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 :nth-of-type pseudo-class in CSS allows you to style elements based on their position relative to other elements of the same type. For example, you could use it to style the first child element of a certain type, or the even-numbered child elements of a certain type.

The :nth-of-type pseudo-class takes a single argument, which is an integer. This integer represents the position of the element relative to other elements of the same type. The first element is 1, the second element is 2, and so on.

If you want to style the first child element of a certain type, you would use the following CSS selector:

.my-element:nth-of-type(1) {

  /* styles go here */

}

If you want to style all of the even-numbered child elements of a certain type, you would use the following CSS selector:

.my-element:nth-of-type(even) {

  /* styles go here */

}

You can also use the :nth-of-type pseudo-class to style elements based on their position relative to other elements of a different type. For example, you could use it to style the first child element of a certain type that is followed by an element of another type.

To do this, you would use the following CSS selector:

.my-element:nth-of-type(1) ~ .other-element {

  /* styles go here */

}

This selector will style the first .my-element element that is followed by a .other-element element.

The :nth-of-type pseudo-class is a powerful tool for styling elements based on their position relative to other elements on the page. It can be used to create a variety of different effects, such as highlighting the first or last child element of a certain type, or alternating the styles of different types of elements.

Syntax

element: nth-of-type (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

<div>

  <div>This element isn't counted.</div>

  <p>1st paragraph.</p>

  <p>2nd paragraph.</p>

  <div>This element isn't counted.</div>

  <p>3rd paragraph.</p>

  <p>4th paragraph.</p>

</div>

CSS

/* Odd paragraphs */

p:nth-of-type(2n+1) {

  color: red;

}



/* Even paragraphs */

p:nth-of-type(2n) {

  color: blue;

}



/* First paragraph */

p:nth-of-type(1) {

  font-weight: bold;

}