CSS First Child

The first child, a CSS selector (first-child), enables us to apply the first element's style directly to the other element. According to the CSS Selectors Level 3 specification, it is referred to as a structural pseudo-class since it bases the style of any content on how it relates to its parent and sibling content.

Syntax

Example

Output

Example

Let's look at an example of First-child CSS to understand their differences better.

Code

HTML source code for First-child CSS.

Output

Explanation:

The body block of the above code is made up of a div tag (div>), and inside of the div tag are several paragraph tags (p>) with various contents. We have applied internal or embedded CSS inside the head block, styling the p tag inside the div tag using the first child selector (p:first-child), which will automatically identify the first paragraph element right inside the div tag. However, we are not required to create a class for the p tag. To that first element (paragraph), we may add style.

How does CSS's First Child Operate?

The first child CSS selector is frequently used to style the content of the first element inside the parent element. It looks for the first child element of the parent element. A pseudo-class that is a member of the position-based and structure-based classes is the first child.

Without checking for more siblings (elements) of the same type, the first class will try to match with the first immediate child of the parent. If both of the elements' parents are the same, the first child can target more than one element.

First Child of the Class in CSS with Examples

Now that we understand the first child (first-child) in CSS, let's look at some instances of how the first child in CSS may be chained with other classes.

Using the paragraph <p> tag

Applying the first child's CSS using the <p> paragraph tag is possible. The first child CSS will only style the first paragraph element inside the parent tag and ignore the remaining elements. Put another way, if we add styling to the paragraph tag using the first child selector, the remaining paragraph tags will not receive any styling.

Syntax

Example

For a better understanding, let's look at an example of the first child CSS using the CSS paragraph tag <p>.

Output

Explanation:

1. The body block of the first child CSS code is made up of two div tags (<div>).
2. The first div element includes different <p> paragraph tags with various contents.
3. A header tag (h) and a paragraph tag <p> with distinct content can be found inside the other div tag.
4. We have applied internal or embedded CSS inside the head block, styling the p tag inside the div tag using the first child selector (p:first-child), which will automatically identify the first paragraph element inside the first div tag. However, we are not required to create a class for the p tag. To that first element (paragraph), we may add style.
5. But the second div tag has a heading tag, or <h>. We can see that the paragraph tag inside the second div tag is not styled because the first child would not be able to get the first paragraph tag element immediately inside the parent tag if there were a heading or another tag present before the paragraph tag, p.

With a Span Tag <span>

A span tag, or "span," can apply the first child's CSS. As a result, if we apply styling to the span tag using the first child selector, just the first span tag will be styled, and the rest of the span tag won't be treated. The first child will target the first span element within the parent tag, and the rest will be ignored.

Syntax:

Example:

Let's look at an example of the first child CSS using the span tag in CSS for a better understanding.

Output

Explanation:

1. Two div tags <div> comprise the body block in the code above.
2. There are many paragraph tags <p> with various snap tags <snap> inside the first div element.
3. A header tag <h> and a paragraph tag <p> with a snap tag <snap> are both included within the other div tag.
4. We have applied internal or embedded CSS inside the head block and styled the snap tag within the paragraph tag. However, we are not required to create a class for the snap tag; instead, we can use the first child selector (p:first-child) to instantly identify the first snap tag element inside the first div tag. We can give the initial element (snap) some style. There are two snap tags within the paragraph, but as we can see, only the first tag is styled, and the others have been ignored.
5. We can see how the first child looked for the first snap tag and styled it in the second div tag. The element must be the first element among its siblings inside the parent tag to be targeted by the first child; otherwise, it will not be chosen.

Using the <tr> Row Tag

Using the row tag <tr>, we can apply the first child of CSS. As a result, if we apply styling to the row tag using the first child selector, just the first-row tag will be styled, and the rest of the row tag won't be styled. The first child will target the first-row element within the parent tag, and the rest will be ignored.

Syntax

Example

For a better understanding, let's look at an example of the first child CSS using the row tag <tr> in CSS.

Output

Explanation:

1. The body block of the code above contains table tags for the student information <table>.
2. There are several rows of tags <tr> inside the table tag <table>, and the first-row tag has headers like the student's roll number, name, and marks. The student's data are contained in the remaining row tags.
3. For styling the row tag <tr> inside the table tag <table>, we have applied internal or embedded CSS inside the head block. However, we are not required to create a class for the row tag; instead, we are simply using the first child selector (p:first-child), which will automatically recognize the first-row tag <row> element right inside the table tag. We may style the row tag, which is the first element. There are several rows of tags inside the table. However, as we can see, the first tag gets styled while the rest are disregarded.

Conclusion

We learned about CSS's first-child in this article. Here is a conclusion of first-child in the article:

1. In CSS, the first child (:first-child) selector enables us to immediately apply the first element's style to the other element.
2. The first-child styles the material based on how it relates to its parents' and siblings' content.
3. A pseudo-class that is a member of the position-based and structure-based classes is the first child. Without checking for more siblings (elements) of the same type, the first class will try to match with the first immediate child of the parent.