Code360 powered by Coding Ninjas X Naukri.com. Code360 powered by Coding Ninjas X Naukri.com
Table of contents
1.
Introduction
2.
CSS first child
3.
Properties of CSS first child
4.
Examples
5.
Frequently Asked Questions
5.1.
What are Pseudo Classes?
5.2.
What does a first-child class do?
5.3.
Is CSS a programming language?
6.
Conclusion
Last Updated: Mar 27, 2024
Easy

CSS First Child

Author Jay Dhoot
0 upvote
gp-icon
Basics of javascript
Free guided path
10 chapters
68+ problems
gp-badge
Earn badges and level up

Introduction

Do you know that there are plenty of classes present in CSS? In this article, we will discuss about the CSS first-child  Pseudo Classes . A pseudo-class helps in defining a unique state of an element.

CSS first child

The article will cover the core concept of first class, along with its properties. We would also see plenty of examples of adding first-child classes to CSS.

CSS first child

CSS first child is pseudo-classes that help in adding special effects to the first child element of the parent element. The first child element is always defined with respect to a parent element. It is the first element or first tag inside an HTML tag(a Parent tag).

To use CSS first-child classes in Internet Explorer 8 or earlier versions, <!DOCTYPE> must be used.
Syntax:

:first-child{
  // CSS properties
}
Get the tech career you deserve, faster!
Connect with our expert counsellors to understand how to hack your way to success
User rating 4.7/5
1:1 doubt support
95% placement record
Akash Pal
Senior Software Engineer
326% Hike After Job Bootcamp
Himanshu Gusain
Programmer Analyst
32 LPA After Job Bootcamp
After Job
Bootcamp

Properties of CSS first child

Let us now discuss some of the properties of CSS first child pseudo-classes:-

  1. The CSS first child is a pseudo-class that helps select the first element among a group of elements under a parent element.
     
  2. These classes can also be applied to nested elements. However, it only selects the first element of every parent element.
     
  3. It helps in applying styling to the selected first elements.
     
  4. The CSS first-child class names are not case-sensitive.
     
  5. These classes are different from CSS classes, but they can be combined with these CSS classes.

Examples

After having a good understanding of CSS first child classes, let us now get our hands on it. We will now look at some different ways of using first-child classes.

Example-1

<!-- Html Document Begins-->
<!DOCTYPE html>
<html>
      <!-- Header Section-->
<head>
<title>
    First Child Classes
</title>
            <style>
                  p:first-child
                  {
                        background: orange;
                  }
            </style>
</head>
            
      <!--Body of the Webpage-->
<body>
           <p>Hi! I am the first element under the body tag.</p>
           <p>Hi! I am not selected as this is the second element under the body tag.</p>
           <p>Hi! I am not selected as this is the third element under the body tag.</p>
</body>
</html>
<!-- Html Document Ends-->


Output

Output

Explanation

Four paragraph tags are present under the body tag, the parent element. As the first-child class is applied to the paragraph tag, it would only apply styling to the first paragraph tag under the body tag. So, as you can see in the output, only the first paragraph is styled according to CSS properties.

 

Example-2

<!-- Html Document Begins-->
<!DOCTYPE html>
<html>
      <!-- Header Section-->
<head>
<title>
    First Child Classes
</title>
            <style>
                  li:first-child
                  {
                     color: orange;
                     font-size: 30px;
                  }
            </style>
</head>
            
      <!--Body of the Webpage-->
<body>
           <ol>
            <li>First Item</li>
            <li>Second Item</li>
            <li>Third Item</li>
           </ol>


           <ul>
            <li>C++</li>
            <li>Python</li>
            <li>PHP</li>
           </ul>
</body>
</html>
<!-- Html Document Ends-->


Output

Output

Explanation

The first <li> tag present under the parent tag <ol>  and the parent tag <ul> are the first-child elements. Hence, the styling is applied to them.

 

Example-3

<!-- Html Document Begins-->
<!DOCTYPE html>
<html>
      <!-- Header Section-->
<head>
<title>
    First Child Classes
</title>
            <style>
                  p:first-child b 
                  {
                     color: orange;
                     font-size: 20px;
                     font-family: 'Courier New', Courier, monospace;
                  }
            </style>
</head>
            
      <!--Body of the Webpage-->
<body>
           <p>Hi! I am from <b>Coding</b> <b>Ninjas</b> </p>
           <p><b>Coding Ninjas</b> offers a lot of <b>courses</b>.</p>
           <p>It is a platform where students <b> learn to code</b>.</p>
</body>
</html>
<!-- Html Document Ends-->


Output

Output

Explanation

In this, every bold tag is selected, which is present inside the first paragraph tag.  

 

Example-4

<!-- Html Document Begins-->
<!DOCTYPE html>
<html>
      <!-- Header Section-->
<head>
<title>
    First Child Classes
</title>
            <style>
                  ol > :first-child 
                  {
                    color:orange;
                    font-size: 20px;
                  }
            </style>
</head>
            
      <!--Body of the Webpage-->
<body>
           <ol>
             <li>Coding</li>
             <li>Ninja</li>  
           </ol>


           <ol>
             <li>First</li>
             <li>Second</li>  
           </ol>
</body>
</html>
<!-- Html Document Ends-->


Output

Output

Explanation

It selects and styles the first child element of every <ol> element.

Frequently Asked Questions

What are Pseudo Classes?

A pseudo-class is a special class in CSS that helps in defining a unique state of an element. For example, a hover can change text color when the user's pointer hovers over it.

What does a first-child class do?

The first child is a pseudo-class that helps select the first element among a group of elements under a parent element. These classes can also be applied to nested elements. However, it only selects the first element of every parent element.

Is CSS a programming language?

No, Cascading Style Sheet or CSS is not a programming language. Since it does not have variables, loops, or conditional statements, it does not qualify to be called a programming language. It is a stylesheet that is used to style the HTML web pages.

Conclusion

In this article, we have discussed first-child pseudo-classes in CSS. We have also seen various examples of how to use first-child class. To learn more about CSS, you can refer to the below-mentioned article:

Introduction to CSS

CSS Layout

CSS Selectors

We hope this article has helped you understand first child pseudo classes in CSS. If this article helped you in any way, then you can read more such articles on our platform, Coding Ninjas Studio. You will find articles on almost every topic on our platform. Also, for cracking good product-based companies, you can practise coding questions at Coding Ninjas. For interview preparations, you can read the Interview Experiences of popular companies.

Happy Coding !!

Previous article
CSS Grid
Next article
CSS Flexbox
Guided path
Free
gridgp-icon
Basics of javascript
10 chapters
68+ Problems
gp-badge
Earn badges and level up
Live masterclass