The CSS **nth-of-type(n) selector** matches every element of a specific type that is the $n^{th}$ child of its parent.

> `n` can be any of the following:
> * number
> * keyword
> * formula.

# Syntax
```
: nth-of-type(number) {
  // css 
}

```


<!DOCTYPE html>
<html>
<head>
<style> 
p:nth-of-type(1) {
  // passing n as 1 will highlight the background of first paragraph
  // as red and change its text-align and text color.
  background: red;
  text-align: center;
  color: green;

}
</style>
</head>
<body>
<p>First</p>
<p>Second</p>
<p>Third</p>
</body>
</html>

codemirror

The code below shows how different stylings can be applied to different paragraphs based on their nth value. 



<!DOCTYPE html>
<html>
<head>
<style> 
p:nth-of-type(1) {
  // passing n as 1 will highlight the background of first paragraph
  // as red and change its text-align and text color.
  background: red;
  text-align: center;
  color: green;

}
p:nth-of-type(2) {
  // passing n as 2 will highlight the styling of second paragraph
  background: black;
  text-align: right;
  color: blue;

}
p:nth-of-type(3) {
  // passing n as 3 will highlight the styling of third paragraph
  background: green;
  text-align: left;
  color: yellow;
}
</style>
</head>
<body>
<p>para1</p>
<p>para2</p>
<p>para3</p>
</body>
</html>

What is CSS nth-of-type?

The CSS nth-of-type(n) selector targets specific child elements of the same type within a parent element based on their position.