CSS get first child element
Get First Child Element with CSS
In web development, we often need to manipulate the child elements of HTML elements. Sometimes, we only want to select the first child element to apply a specific style or behavior. In these cases, we can use CSS to target the first child.
Using the :first-child Pseudo-Class
In CSS, you can use the :first-child pseudo-class to select the first child of an element. This pseudo-class selects the first child of a specified element, regardless of its type.
The sample code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>First Child Example</title>
<style>
.parent {
background-color: lightgray;
padding: 10px;
}
.child {
margin-bottom: 5px;
padding: 5px;
background-color: lightblue;
}
.child:first-child {
background-color: lightgreen;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">First Child</div>
<div class="child">Second Child</div>
<div class="child">Third Child</div> </div>
</body>
</html>
In the example above, we created a parent element, .parent, with three child elements, each with the class .child. We used the .child:first-child selector to select the first child of the .parent element and set its background color to lightgreen.
When we run this code in a browser, we see that the background color of the first child is set to lightgreen, as shown below:
First Child
Second Child
Third Child
This shows that we successfully used the :first-child pseudo-class to select the first child and apply specific styles to it.
Using the :first-of-type Pseudo-Class
In addition to the :first-child pseudo-class, CSS also provides the :first-of-type pseudo-class, which selects the first child of an element of a specified type.
The sample code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>First of Type Example</title>
<style>
.parent {
background-color: lightgray;
padding: 10px;
}
.child {
margin-bottom: 5px;
padding: 5px;
background-color: lightblue;
}
.child:first-of-type {
background-color: lightcoral;
}
</style>
</head>
<body>
<div class="parent">
<span class="child">First Child</span>
<div class="child">Second Child</div> <div class="child">Third Child</div>
</div>
</body>
</html>
In this example, we’ve changed the first child element to a <span> tag instead of the previous <div>. Using the .child:first-of-type selector, we’ve successfully selected the first <span> element and set its background color to lightcoral.
When we run this code in a browser, we’ll see that the background color of the first <span> child element is set to lightcoral, as shown below:
First Child
Second Child
Third Child
This demonstrates that we’ve successfully used the :first-of-type pseudo-class to select the first child of a specified type, <span>, and applied specific styles to it.
Summary
In this article, we’ve detailed how to use the :first-child and :first-of-type pseudo-classes to select the first child of an element. These two pseudo-classes allow us to easily manipulate the first child of an HTML element and apply specific styles or behaviors to it.