​The **`:first-of-type` selector** is used to target the first child occurrence of every element of its parent. The first child of that particular element will adopt all of the properties. 

<br>

# Syntax

The syntax for the `:first-of-type` selector given below:

## Examples

The code examples below show how the `:first-of-type` selector is used to manipulate the formatting properties that follow: 


        p:first-of-type { 
            background: #FFB695; 
            font-size: 4.0em; 
            font-style: bold; 
        } 
   



<!DOCTYPE html> 
<html> 
    <head> 

</head> 
<body> 

	<p>SpiderMan</p> 
	<p>A hero is not someone with tights or a cool outfit. They are not people who have superpowers (although they could help) heroes are people who inspire others. They give up everything, even if it means that they live in a dilapidated old shack. They give up everything so that they can help people even if it means that they have to sacrifice their own body for someone they don’t even know. In my paper I will be talking about my hero, Spiderman, what a hero means to me, and all of the types of heroes there are.</p> 

</body> 

</html> 


codemirror


h1:first-of-type { 
    background: #74C3E1; 
    font-size: 6.0em; 
    font-style: italic; 
        } 
   



<!DOCTYPE html> 
<html> 
    <head> 

</head> 
<body> 

	<h1>SpiderMan</h1> 
	<h1> BatMan </h1>
	<h1> IronMan </h1>
</body> 

</html> 


What is the first of type selector in CSS?

The :first-of-type selector targets and styles the first child of a specified type within its parent element.