:nth-of-type CSS Pseudo Class

Description

The :nth-of-type pseudo-class is used to add style to elements of the specified type based on the numbering in the element tree.

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;

}

Result

Browser Support

Desktop

9	12	1	3.5	9.5	3.1

Tablets / Mobile

2	18	4	10.1	2	1.0

Last updated by CSSPortal on: 25th November 2019

Share this Page

If you have enjoyed using CSSPortal, please consider sharing this page with other users, just click on your preferred social media link or copy the webpage from the link below.

URL

Menu