The :First-of-Type Pseudo-Class

The :first-of-type selector matches every element that is the first child, of a particular type, of its parent. Specify a background color for the first <p> element of its parent:

HTML file:	Displayed by browser:
<style> p:first-of-type { background: #ff0000; } </style> <body> <h1>This is a heading</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>This is a heading</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.

This is the same as :nth-of-type(1).