The :Nth-of-Type(n) Pseudo-Class

The :nth-of-type(n) selector matches every element that is the nth child, of a particular type, of its parent. The 'n' can be a number, a keyword, or a formula. In this example, the selector specifies a background color for every <p> element that is the second p element of its parent:

HTML file:	Displayed by browser:
<style> p:nth-of-type(2) { background: #ff0000; } </style> <body> <h1>The first paragraph.</h1> <p>The first paragraph.</p> <p>The second paragraph.</p> <p>The third paragraph.</p> <p>The fourth paragraph.</p> </body>	This is a heading The first paragraph. The second paragraph. The third paragraph. The fourth paragraph.

HTML file:

Displayed by browser:

<body>
<h1>The first paragraph.</h1>
<p>The first paragraph.</p>
<p>The second paragraph.</p>
<p>The third paragraph.</p>
<p>The fourth paragraph.</p>
</body>

This is a heading

The first paragraph.

The second paragraph.

The third paragraph.

The fourth paragraph.

Note: Look at the :nth-child() selector to select the element that is the nth child, regardless of type, of its parent.