Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Difference Between :first-child and :first-of-type selector in CSS
Cascading Style Sheets (CSS) is fundamental language used for styling the webpages during web development. It enables the developers to customize the layout and add visual effects to it.
CSS Selectors are an important tool which allows the developers to select or match HTML elements and apply styles to them. :first-child and :first-of-type are most commonly used selectors which are often confused by the developers. Some may have used them interchangeably by mistake.
Although they look quite similar when applied to elements, there are few differences which may impact your web design (if not used appropriately). In this article, we will discuss about these two selectors, how they work and the difference between them.
The :first-child Selector Class
The :first-child selector is pseudo-class CSS selector which selects or matches the first child element of a parent element. This prevents the developers for assigning classes or ids to each element with the parent.
Syntax
element:first-child {
CSS declarations;
}
Example
Suppose you want to add a specific style to the first child element of the div element in the following example −
<html>
<head>
<style>
* {
margin: 10px;
padding: 3px;
}
p:first-child {
color: red;
font-size: 19px;
}
</style>
</head>
<body>
<h1> :first-child Selector </h1>
<div>
<p> First child of the div element. </p>
<p> Second child of the div element. </p>
<p> Third child of the div element. </p>
</div>
</body>
</html>
In the above example, we have used p:first-child to select the desired element and applied the red color to its text.
The :first-of-type Selector Class
The :first-of-type is a pseudo-class CSS selector which selects or matches the first child element of a specific type within its parent element. Here, the type of the child element is the determining factor.
Syntax
element:first-of-type {
CSS declarations;
}
Example
Suppose you want to apply a specific style to the first, you can do so as shown below −
<html>
<head>
<style>
* {
margin: 10px;
padding: 3px;
}
h2:first-of-type {
color: green;
text-decoration: underline;
}
</style>
</head>
<body>
<h1> :first-of-type Selector </h1>
<div>
<p> First child of the div element. </p>
<h2> First-of-type element </h2>
<p> Third child of the div element. </p>
<p> Fourth child of the div element. </p>
</div>
</body>
</html>
In the above example, we have used h2:first-of-type to select the first h2 child element of the parent div element. The first h2 child element is green colored and underlined. Here, we can clearly see that the first-of-type element is not the first child of the parent div element. Let’s understand the difference between them in depth.
Difference Between the :first-child and :first-of-type Selector
The major difference between these two is that the :first-child selector is used to select the first child of an element irrespective of its type, class or id.
Whereas, the :first-of-type selector is used to select the first child element of a specific type, which is represented by its tag name (like h2, h3, p etc.,) within its parent element.
The :first-child can also be the :first-of-type element. Let’s take an example.
<div> <p> Child 1 </p> <!-- First child of div element and p:first-of-type element--> <p> Child 2 </p> <p> Child 3 </p> <p> Child 4 </p> </div>
Here, Child 1 is the first child of the div element. Also, it is the first element of p type within the parent div element.
However, it is not always necessary that the :first-of-type child element will be the :first-child of any parent element. This happens when you change the type of the child element. See the below example.
<div> <p> Child 1 </p> <!-- p:first-child of div element and p:first-of-type --> <h3> Child 2 </h3> <!-- h3:first-of-type element --> <p> Child 3 </p> <p> Child 4 </p> </div>
Here, Child 1 is the first child of the div element. Child 2 is the second child of the div element as well as the first child of h3 type within the parent div element.
This implies that any element can have only one :first-child element at a time. While it can have more than one :first-of-type child element if it contains different types of child element in it. Let’s see an example.
<div> <p> Child 1 </p> <!-- p:first-child element and p:first-of-type element --> <h3> Child 2 </h3> <!-- h3:first-of-type element --> <p> Child 3 </p> <p> Child 4 </p> <h2> Child 5 </h2> <!-- h2:first-of-type element --> <p> Child 6 </p> </div>
Conclusion
In this article, we have discussed about the two powerful selectors of CSS i.e., :first-child and :first-of-type. They are used for selecting specific elements within a webpage. While these two selectors appear similar, they perform different functions and used according to the output. The concept discussed here can be applied for :last-child and :last-of-type selectors also. By understanding the concept of these selectors, you can create more visually appealing and user-friendly websites.
2K+ Views
