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.
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
}
Properties of CSS first child
Let us now discuss some of the properties of CSS first child pseudo-classes:-
The CSS 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.
It helps in applying styling to the selected first elements.
The CSS first-child class names are not case-sensitive.
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
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
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
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
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:
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.
8+ registered 