Understanding the CSS :first-of-type
Pseudo-class
The :first-of-type
pseudo-class in CSS allows you to select and style the first element of a specific type within its parent. This is particularly useful when you want to apply styles to the first occurrence of an element without adding extra classes or IDs to your HTML markup.
What Is the :first-of-type
Pseudo-class?
The :first-of-type
pseudo-class represents the first sibling of its type (tag name) within a parent element. It targets the first instance of a specific element type among its siblings, regardless of their classes or IDs.
Syntax
The basic syntax for using :first-of-type
is:
selector:first-of-type {
/* CSS properties */
}
Example Usage
Consider the following HTML structure:
<div class="article">
<h2>Article Title</h2>
<p>Introduction paragraph.</p>
<p>Main content paragraph.</p>
<p>Conclusion paragraph.</p>
</div>
To style the first <p>
element within the .article
class, you can use:
.article p:first-of-type {
font-weight: bold;
font-size: 18px;
}
This CSS rule applies bold text and increases the font size of the first paragraph inside the .article
div.
How It Works
The :first-of-type
pseudo-class selects the first element of the specified type among its sibling elements within the same parent. It only considers elements of the same type, ignoring other types of elements that may be present.
Difference Between :first-of-type
and :first-child
It's important to distinguish between :first-of-type
and :first-child
:
:first-of-type
selects the first element of a specific type among siblings.:first-child
selects the very first child element of a parent, regardless of its type.
For example, if the first child of a parent is an <h2>
element, p:first-child
would not select any element, but p:first-of-type
would select the first <p>
element that appears after the <h2>
.
More Examples
Styling the First List Item
HTML:
<ul class="menu">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
CSS:
.menu li:first-of-type {
background-color: #f0f0f0;
}
This will apply a light gray background to the first <li>
item in the menu.
Styling the First Table Column
HTML:
<table>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
</tr>
</table>
CSS:
td:first-of-type {
font-weight: bold;
}
This styles the first <td>
in each row, making the text bold.
Combining with Other Pseudo-classes
You can combine :first-of-type
with other pseudo-classes for more specific selections.
Example: Styling the First Paragraph Inside Each Section
HTML:
<section>
<h2>Section 1</h2>
<p>First paragraph in section 1.</p>
<p>Second paragraph in section 1.</p>
</section>
<section>
<h2>Section 2</h2>
<p>First paragraph in section 2.</p>
<p>Second paragraph in section 2.</p>
</section>
CSS:
section p:first-of-type {
text-indent: 20px;
}
This indents the first paragraph in each <section>
element.
Browser Support
The :first-of-type
pseudo-class is widely supported in all modern browsers, including:
- Google Chrome
- Mozilla Firefox
- Microsoft Edge
- Safari
- Opera
- Internet Explorer 9 and above
Conclusion
The :first-of-type
pseudo-class is a powerful and efficient way to target the first occurrence of an element type within its parent, without the need for additional classes or IDs. It enhances your CSS by allowing more precise selections, leading to cleaner HTML markup and more maintainable stylesheets.