first-of-type
CSS :first-of-type Pseudo Class
The CSS :first-of-type pseudo-class selects an element that is the first element of its type in the list of children of its parent. It is the same as :nth-of-type.
The :first-of-type selector is actually similar to :nth-child but there is a difference: it is less specific. The :first-of-type selector targets a specific type of an element in the arrangement only with relation to similar siblings.
Beginning with Selectors Level 4 it is not required from the selected element to have a parent. （>从选择器级别4开始，所选元素不需要父级。）
Version
Version （版本）
Selectors Level 3 （选择器级别3）
Selectors Level 4 （选择器级别4）
Syntax
Syntax （语法）
:first-of-type {
css declarations;
}
Example of the :first-of-type selector:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p:first-of-type {
background: #8ebf42;
}
</style>
</head>
<body>
<h2>:first-of-type selector example</h2>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
</body>
</html>
Example of the :first-of-type selector with the <article> tag:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p:first-of-type {
font-size: 22px;
color: #777777;
}
</style>
</head>
<body>
<h2>:first-of-type selector example</h2>
<article>
<h2>This is a title.</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. .</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. .</p>
</article>
</body>
</html>
Example of the :first-of-type selector with some HTML tags:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
margin: 0;
}
article:first-of-type {
background-color: #777777;
color: #ffffff;
}
</style>
</head>
<body>
<h2>:first-of-type selector example</h2>
<article>
<p>This is a first element!</p>
<p>This <em>nested 'em' is first</em>!</p>
<p>This <strong>nested 'strong' is first</strong>, but this <strong>nested 'strong' is last</strong>!</p>
<p>This <span>nested 'span' gets styled</span>!</p>
<q>This is a 'q' element!</q>
<p>This is a last element.</p>
</article>
</body>
</html>