Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Difference Between :first-child and :first-of-type selector in CSS
The :first-child and :first-of-type selectors are CSS pseudo-classes that help target specific elements within a parent container. While they may seem similar, they work very differently and understanding their distinction is crucial for precise element selection.
The :first-child selector targets the very first child element of a parent, regardless of its element type. The :first-of-type selector targets the first element of a specific type within a parent container.
Syntax
/* :first-child selector */
element:first-child {
property: value;
}
/* :first-of-type selector */
element:first-of-type {
property: value;
}
The :first-child Selector
The :first-child selector matches the first child element of a parent, regardless of the element's tag name. It only cares about position being the very first child.
Example
Here's how :first-child works
<!DOCTYPE html>
<html>
<head>
<style>
.container {
margin: 20px;
padding: 10px;
border: 1px solid #ccc;
}
.container p:first-child {
color: red;
font-weight: bold;
background-color: #ffe6e6;
padding: 5px;
}
</style>
</head>
<body>
<div class="container">
<p>First child paragraph - will be styled</p>
<p>Second child paragraph</p>
<p>Third child paragraph</p>
</div>
</body>
</html>
The first paragraph appears with red text, bold font, and light red background, while the other paragraphs remain unstyled.
The :first-of-type Selector
The :first-of-type selector matches the first element of a specific element type within its parent, regardless of its position among all children.
Example
Here's how :first-of-type works with mixed elements
<!DOCTYPE html>
<html>
<head>
<style>
.container {
margin: 20px;
padding: 10px;
border: 1px solid #ccc;
}
h2:first-of-type {
color: green;
text-decoration: underline;
}
p:first-of-type {
color: blue;
font-style: italic;
}
</style>
</head>
<body>
<div class="container">
<p>First paragraph - will be blue and italic</p>
<h2>First heading - will be green and underlined</h2>
<p>Second paragraph - normal styling</p>
<h2>Second heading - normal styling</h2>
</div>
</body>
</html>
The first paragraph appears in blue italics, the first h2 appears in green with underline, while the remaining elements have normal styling.
Key Differences Comparison
| Aspect | :first-child | :first-of-type |
|---|---|---|
| Selection Criteria | Position-based (first child) | Type-based (first of element type) |
| Element Type | Any element type | Specific element type |
| Multiple Matches | Only one per parent | One per element type per parent |
Practical Difference Example
This example demonstrates when the selectors behave differently
<!DOCTYPE html>
<html>
<head>
<style>
.demo {
margin: 20px;
padding: 10px;
border: 2px solid #333;
}
.demo h3:first-child {
background-color: yellow;
}
.demo h3:first-of-type {
color: purple;
font-weight: bold;
}
</style>
</head>
<body>
<div class="demo">
<p>I am the first child (not h3)</p>
<h3>I am the first h3 element</h3>
<h3>I am the second h3 element</h3>
</div>
</body>
</html>
The first h3 element appears in purple bold text (first-of-type match) but has no yellow background (first-child doesn't match since the p element is the actual first child).
Conclusion
The :first-child selector targets the first child regardless of element type, while :first-of-type targets the first occurrence of a specific element type. Choose :first-child when position matters most, and :first-of-type when element type is the priority.
3K+ Views
