What is the first-child in CSS?

The first child CSS (:first-child) is a selector in CSS, that allows us to add the styling for the first element immediately inside the other element. It is defined as a structural pseudo-class in the CSS Selectors Level 3 spec, that is, based on the relationship of any content with its parent and sibling content, its style of the content.

Syntax

Below given is the syntax for the first child in CSS

Arguments and Explanation

element : The first that type of element we need to add styling within its parent. For example p tag <p>, h tag <h1>.

style properties : The different style properties we want to add for the element.

Explanation:

In the above syntax of first child CSS, there is the first element type proceeds with a colon (:) and then we mention the first child (:first-child) selector, then we add the style for the element.

For instance, suppose there is a div tag (<div>) inside an HTML code, and inside the div tag (<div>) there are different paragraphs, and if we want to style the first paragraph (let's say make it larger), for this we will not give any class for that paragraph, instead, we will use the first child (:first-child) inside our CSS code, just after the element's tag, in this case, we will use p tag (p:first-child), this will automatically recognize the first paragraph element immediately inside the div tag, and we can add styling to that first element (paragraph). Let us look at the code for the same, for better understanding.

Example :

Let us see an example of First-child CSS, for a better understanding of their difference.

Code :

Code for First-child CSS in HTML language.

Output :

Explanation :

Let us understand the above code :

• In the above code, the body block consists of a div tag <div>, and inside the div tag, there are different paragraph tags <p> with different contents.
• Inside the head block we have applied the Internal or Embedded CSS, in which we have done the styling of p tag <p> inside the div tag <div>, but for that, we are not required to create a class for the p tag, we are just using the first child selector (p:first-child), and this will automatically recognize the first paragraph element immediately inside the div tag. We can add styling to that first element (paragraph).

How Does the First Child in CSS Work?

The first child in CSS is a selector in CSS, that basically searches for the very first child element of the parent element, and it is widely used in CSS, for styling the content of the first element inside the parent element. The first child is a pseudo-class that belongs to the structure and position-based classes. The first class will basically try to match with the first immediate child of the parent without looking for the other sibling (element) of the same type. The first child can target more than one element but only if the elements have the same parent.

CSS First Child of Class with Examples

We have got a clear idea about the first child (first-child) in CSS, let us now see how the first child css can chain with different classes with examples.

With a Paragraph tag <p>

We can apply the first child css with a paragraph tag <p>. Basically, the first child css will target the first paragraph element inside the parent tag, and the rest of the paragraph element will be ignored, that is, if we add styling with the first child selector for the paragraph tag, only the first paragraph tag will be styled, and the rest of the paragraph tag will not be styled.

Syntax :

Example :

Let us look at an example of the first child css with the paragraph tag <p> in CSS for better understanding.

Code :

Output :

Explanation :

Let us understand the above code :

• In the above code of first child CSS, the body block consists of two div tags <div>.
• Inside the first div tag there are different paragraph tags <p> with different contents.
• Inside the other div tag there is a heading tag <h> and a paragraph tags <p> with different content.
• Inside the head block we have applied the Internal or Embedded CSS, in which we have done the styling of p tag <p> inside the div tag <div>, but for that, we are not required to create a class for the p tag, we are just using the first child selector (p:first-child), and this will automatically recognize the first paragraph element immediately inside the first div tag. We can add styling to that first element (paragraph).
• However, in the second div tag, there is a heading tag <h>. So, If there would be any heading or any other tag before the paragraph tag <p> then the first child would not be able to get the first paragraph tag element immediately inside the parent tag, and hence the first child would not target the paragraph anymore, and we can see the paragraph tag inside the second div tag is not styled.

With a Span Tag <span>

We can apply the first child CSS with a span tag <span>. Basically, the first child will target the first span element inside the parent tag, and the rest of the span element will be ignored, that is, if we add styling with the first child selector for the span tag, only the first span tag will be styled, and the rest of the span tag will not be styled.

Syntax :

Example :

Let us look at an example of the first child CSS with the span tag <span> in CSS for better understanding.

Code :

Output :

Explanation :

Let us understand the above code :

• In the above code, the body block consists of two div tags <div>.
• Inside the first div tag there are different paragraph tags <p> which consist of different snap tag <snap> inside it.
• Inside the other div tag there is a heading tag <h> and a paragraph tag <p> with a snap tag <snap>.
• Inside the head block we have applied the Internal or Embedded CSS, in which we have done the styling of snap tag <snap> inside the paragraph tag <p>, but for that, we are not required to create a class for the snap tag, we are just using the first child selector (p:first-child), and this will automatically recognize the first snap tag <snap> element immediately inside the first div tag. We can add styling to that first element (snap). Inside the paragraph, there are two snap tags, but we can see only the first tag is styled, and the others are ignored.
• In the second div tag, we can observe how the first child searched for the first snap tag and styled it. For getting targeted by the first child, the element must be the first element among its other siblings inside the parent tag, otherwise, it will not be selected by the first child.

With the Row Tag <tr>

We can apply the first child CSS with a row tag <tr>. Basically, the first child will target the first-row element inside the parent tag, and the rest of the row elements will be ignored, that is, if we add styling with the first child selector for the row tag, only the first-row tag will be styled, and the rest of the row tag will not be styled.

Syntax :

Example :

Let us look at an example of the first child css with row tag <tr> in CSS for better understanding.

Code :

Output :

Explanation :

Let us understand the above code :

• In the above code, the body block consists of table tags <table> for the student details.
• Inside the table tag <table> there are different rows tags <tr>, the first-row tag consists of the headings like student's roll number, name, and its marks inside it. The rest of the row tags consist of the student's data.
• Inside the head block we have applied the Internal or Embedded CSS, in which we have done the styling of row tag <tr> inside the table tag <table>, but for that, we are not required to create a class for the row tag, we are just using the first child selector (p:first-child), and this will automatically recognize the first-row tag <row> element immediately inside the table tag. We can add styling to that first element (row tag). Inside the table, there is more than one row of tags, but we can see only the first tag is styled, and others are ignored.

With the Class Attribute

We can apply the first child CSS with the class attribute. Basically, the first child will target the first-row element inside the parent tag, and the rest of the row elements will be ignored. That is, if we add styling with the first child selector for the row tag, only the first-row tag will be styled, and the rest of the row tag will not be styled.

Syntax :

Example :

Let us look at an example of the first child with a class attributes in CSS for better understanding.

Code :

Output :

Explanation :

Let us understand the above code :

• In the above code, the body block consists of two div tags <div> of poems.
• Inside the first div tag there are different paragraph tags <p> with the same class attribute name poem.
• Inside the other div tag there are different paragraph tags <p> with the same class attribute name poem.
• Inside the head block we have applied the Internal or Embedded CSS, in which we have done the styling for the class attribute (.poem) of the paragraph tag <p>, we are just using the first child selector (.poem:first-child), and this will automatically recognize the first element with poem class attribute immediately inside both the div tags, and we can add styling to that first element (paragraph). Inside the div tag <div> there is more than one paragraph with the class attribute as poem, but we can see only the first tag is styled, and others are ignored.
• In the second div tag, we can observe how the first child searched for the first tag with the class attribute as poem and styled it. For getting targeted by the first child, the element must be the first element among its other siblings inside the parent tag, otherwise, it will not be selected by the first child. We can also observe how the first child can target more than one first element of the same type with the same type of parent.

Implementing in List Element

We can apply the first child with the list element. Basically, the first child will target the first list element inside the parent tag, and the rest of the list elements will be ignored, that is, if we add styling with the first child selector for the list tag, only the first list tag will be styled, and the rest of the list tag will not be styled.

Syntax :

Example :

Let us look at an example of the first child with the list element in CSS for better understanding.

Code :

Output :

Explanation :

Let us understand the above code :

• In the above code, the body block consists of a heading tag <h1> and a div tags <div> of the grocery list.
• Inside the first div tag there are different unordered lists of grocery items.
• Inside the head block we have applied the Internal or Embedded CSS, in which we have done the styling for the unordered list (ul) inside the div tag <div>.
• We are just using the first child selector (ul:first-child), and this will automatically recognize the first unordered list element immediately inside the div tags. Note, there is a heading tag too before the div tag, but as we want the first element inside the div tag we have mentioned the div parent tag before the first child selector (div ul:first-child). We can add styling to that first element (ul). Inside the div tag <div> there is more than one unordered list, but we can see only the first tag is styled, and others are ignored.

Implementation Using JavaScript

Now, let us implement the first child first-child using JavaScript that selects only the first child to style the content.

Syntax :

Example :

Let us look at an example of implementation of the first child using javascript for better understanding.

Code :

Output :

Explanation :

Let us understand the above code :

• In the above code, the body block consists of two div tags, <div> of names and color.
• Inside the first div tag there are different span tags, <span> of names.
• Inside the second div tag there are different span tags, <span> of colors.
• Inside the head block we have applied the Internal or Embedded CSS, in which we have done the styling for the span tags <span> inside the div tag <div>.
• At first the color of the content inside the span tag is black.
• We have applied the first child selector (span:first-child) inside the script tag <script>, by which it will target the first span tag element inside both div tags, and if we hover the targetted element, the target element's color changes.
• We are just using the first child selector (span:first-child), and this will automatically recognize the first span tag element immediately inside the div tags. Inside the div tag <div> there is more than one span tag, but we can see only the first tag is styled, and others are ignored.

Difference between First-child and First-of-type.

Before discussing the difference between first child first-child and the first of type first-of-type, let us understand what is first-of-type.

first-of-type : The selector is used for selecting the first child of every element, of a particular type, of its parents. We can also style the first child of an element without giving it any class name, using this first-of-type selector.

Let us now see the difference between the first-child and the first-of-type selector.

Example :

Let us see an example of both first-child and first-of-type in a single code, for a better understanding of their difference.

Code :

Output :

Explanation :

Let us understand the above code:

• In the above code, inside the body block there is a div tag <div> which consists of paragraph p, heading h4, heading h4, and another paragraph p. If you change the first paragraph p into any other tag then the selector will be unable to select any class.
• In case, if you change the first paragraph tag p into the heading tag h4, then the selector will target that h4 tag which is the first child of the parent and also the first child of the defined element.