Difference between :first-child and :first-of-type selector in CSS
The :first-child and :first-of-type selectors in CSS are used to target specific child elements within a parent. The :first-child selector targets an element if it is the first child of its parent, regardless of type.
On the other hand, the :first-of-type selector targets the first occurrence of a specified element type within its parent. Understanding their differences enhances the precision and flexibility of web designs. This article explores the differences between these selectors with examples to help you understand their unique applications in web design.
Example:
<!DOCTYPE html>
<html>
<head>
<title>:first-child and first-of-type selector</title>
<style>
h1 {
color: green;
}
h1,
h2 {
text-align: center;
}
p:first-child {
background: red;
}
h4:first-of-type {
background: green;
}
</style>
</head>
<body>
<h1>w3wiki</h1>
<h2>This is :first-child and first-of-type selector</h2>
<div>
<p>I am the First Child</p>
<h4>I am the first of type Child</h4>
<h4>I am the third Child</h4>
<p>I am the fourth Child</p>
</div>
</body>
</html>
Output:
Difference between :first-child and :first-of-type selector:
| :first-child | :first-of-type |
|---|---|
| This selector only choose the define element if the element is the first child of the parent. If the define element comes second position then this selector can not select that element. | This selector chose the define element if the element comes 2nd, 3rd or 4th any place but have to be the first of it’s type. |
| In the above example you can see inside the div tag the childs are p, h4, h4 and p. If you change 1st p tag into a another tag then :first-child selector can not select any child. | In the above example you can see inside the div tag the childs are p, h4, h4 and p. If you change 1st p tag into h4 tag then :first-of-child selector will select the first child of that parent which is also be the first child of the define element. |
Conclusion:
Understanding the :first-child and :first-of-type selectors is crucial for precise CSS styling. While :first-child targets the very first child element, :first-of-type focuses on the first instance of a particular type within a parent. Mastering these selectors allows for more nuanced and efficient CSS, enhancing your web design capabilities.