:first-of-type
:first-of-type is a pseudo-class selector that selects an element that is the first element (sibling) of its type in the list of children of its parent.
In other words, :first-of-type matches the first occurrence of an element inside its parent. For example, the following rule will select and style the first paragraph in .container.
<article>
<h1>Article Title</h1>
<p>
First paragraph.
</p>
<p>
Second paragraph.
</p>
<!-- .... -->
</article>
p:first-of-type {
font-size: 1.5em;
}
Trivia & Notes
:first-of-type is similar to the :first-child selector, except that it is more specific than the latter—:first-of-type will select the first paragraph in the above example whether or not it is the first child of the article; :first-child, on the other hand, is used to select the element only if it is the first child of its parent. So, this:
p:first-child {
font-size: 1.5em;
}
will not style the first paragraph above because it is not the first child of its parent. You can read more about the :first-child selector in its entry.
The :first-of-type pseudo-class, just like other pseudo-classes, can be chained with other selectors such as :hover, for example, to provide hover styles for selected element. It can also be chained with pseudo-elements ::before and ::after. See the examples and live demo sections below for examples.
Examples
Suppose you have the following markup:
<div class="container">
<h1>Title</h1>
<nav>
<ul>
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
<li>Fourth Item</li>
</ul>
</nav>
<article>
<h2>Title</h2>
<p>
Lorem Ipsum... <a target="_blank" href="#">Link</a>... <a target="_blank" href="#">another Link</a>
</p>
<p>
Lorem Ipsum...
</p>
</article>
<article>
<h2>Title</h2>
<p>
Lorem Ipsum...
</p>
<p>
Lorem Ipsum
</p>
</article>
</div>
The following rule will select the first article in the above .container:
article:first-of-type {
background-color: #eee;
border: 1px solid #ddd;
}
The following rule will select the first occurrence of a paragraph in its parent’s list of children:
p:first-of-type {
font-weight: bold;
}
The following rule will select the first occurrence of a link inside its parent and use pseudo-elements to print the href of that link, wrapped in parenthesis, right after it:
a:first-of-type {
color: deepPink;
}
a:first-of-type::after {
content: "(" attr(href) ")";
color: deepPink;
}
You can see a live demo of this example in the next section.
Live Demo
View this demo on the Codrops PlaygroundBrowser Support
The :first-of-type pseudo-class is supported in Chrome, Firefox, Safari, Opera 9.5+, Internet Explorer 9+, and on Android and iOS.