[CSS Selector] E:first-of-type

style.css

/* make the first div inside a div red */
div div:first-of-type { color: red;}

/* bold the first li in a ul */
ul li:first-of-type { font-weight: bold; color: #2c3e50;}

/* highlight the first th in a row */
tr th:first-of-type { background-color: #3498db; color: white;}

/* make the first image span the full width of a gallery */
.gallery img:first-of-type { width: 100%; grid-column: 1 / -1;}

/* remove top margin from the first paragraph */
.article p:first-of-type { margin-top: 0;}

div div:first-of-type { color: red;} /* Makes the first div element inside a div red. */

<div>
	<p>This is a p element.</p>
	<div>This is a div element.</div>
	<p>This is a p element.</p>
	<div>This is a div element.</div>
</div>

Note: when combining element names, IDs, class names, or attributes with :first-of-type, the selector first checks the position by element type, and then checks if it also matches the specified element name, ID, class, or attribute. For example, p.hoge:first-of-type applies to the first p element among the children, only if it also has the class "hoge".

div p.hoge:first-of-type { color: red;} /* Makes the first p element in a div red if it has the class "hoge". */

<div>
	<p class="hoge">This is the first p element with class "hoge" inside the div.</p>
	<p class="hoge">This is the last p element with class "hoge" inside the div.</p>
</div>
<div>
	<p>This is the first p element inside the div.</p>
	<p class="hoge">This is a p element with class "hoge" inside the div.</p>
	<p class="hoge">This is a p element with class "hoge" inside the div.</p>
	<p>This is the last p element inside the div.</p>
</div>

To target all first elements of their type, use *:first-of-type or simply :first-of-type. In this case, each element type among the children is counted separately, so the style applies to the first element of each type. For example, if the children contain both p and span elements, the first p and the first span will each receive the style.

div :first-of-type { color: red;} /* Makes the first child of each element type red. */

<div>
	<div>This is a div element.</div>
	<p>This is a p element.</p>
	<div>This is a div element.</div>
	<p>This is a p element.</p>
</div>

※ Version data based on MDN.