Updated April 13, 2023
Introduction to jQuery first child
The jQuery:first-child selector is used to selects all elements that are the first child of its parent. The jQuery:first-child selector is a built-in selector which is used on the HTML element. The first-child selector is similar to :nth-child(1), while the .first() method selects only single element.
Syntax:
$(":first-child selector")Return value – The return value of this method is it selects and returns the first child of their parent.
Examples for jQuery:first-child selector
Example for selecting a single element that is the first child of its parent. Next, we write the HTML code to understand the jQuery UI :first-child selector more clearly with the following example, where the:first-child selector is used to get the first child of the specify parent element.
Example #1
Code:
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title> This is an example for jQuery :first-child selector </title>
<script src="https://code.jquery.com/jquery-3.5.0.js"> </script>
</head>
<script>
$(document).ready(function() {
<!-- the :first-child selector is using to select the first h1 child -->
$("h1:first-child").css(
"background-color", "red");
});
</script>
<body>
<h1> This is a first heading. </h1>
<h1> This is a second heading. </h1>
<h1> This is a third heading. </h1>
</body>
</html>Output:
As in the above program the code $( “h1:first-child”, “background-color”, “red” ); is used to select and get the first child of its parent element and display in some style as background color red. So the first child of the h1 element is selected and that’s why the content of the first h1 tag element is displaying in that style.
Next example, we rewrite the above code where the:first-child selector is used to get the one or more first child of the specify parent element, as in the below code.
Example #2
Code:
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title> This is an example for jQuery :first-child selector </title>
<script src ="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<script>
$(document).ready( function( ) {
<!-- the :first-child selector is using to select the first h1 child -->
$( "h1:first-child" ).css(
"background-color", "red" );
});
</script>
<body>
<h1> This is a first heading. </h1>
<h1> This is a second heading. </h1>
<h1> This is a third heading. </h1>
<div>
<h1> This is a first heading. </h1>
<h1> This is a second heading. </h1>
<h1> This is a third heading. </h1>
</div>
</body>
</html>Output:
As in the above program the code $(“h1:first-child”, “background-color”, “red”); is used to select and get the first child of its parent element and display in some style as background color red. If we see in the above code there are two groups of the h1 elements, so the first child of the h1 element is selected from both groups and that’s why both groups of the first h1 tag element are displaying in that style.
Example of first-child selector for selecting a single element and apply the style class to it.
Next we write the HTML code to understand the jQuery UI :first-child selector more clearly with the following example, where the:first-child selector is used to get the first child of the specify parent element and apply some style to it from the style class, as in the below code.
Example #3
Code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> This is an example for jQuery :first-child selector </title>
<script src = "https://code.jquery.com/jquery-3.5.0.js">
</script>
<style>
.s1 {
border : 2px solid black;
color : white;
background-color : red;
padding : 6px;
margin : 12px;
}
</style>
<script>
$(document).ready( function( ) {
<!-- the :first-child selector is using to select the first h1 child -->
$( "h1:first-child" ).css(
"background-color", "red");
<!-- the :first-child selector is using to select the first p child under div element -->
$( "div p:first-child" ).addClass( "s1" );
});
</script>
</head>
<body>
<div>
<h1> This is a first heading. </h1>
<h1> This is a second heading. </h1>
<h1> This is a third heading. </h1>
</div>
<div>
<p> This is a first paragraph under div. </p>
<p> This is a second paragraph under div. </p>
<p> This is a third paragraph under div. </p>
</div>
<p> This is a first paragraph. </p>
<p> This is a second paragraph. </p>
<p> This is a third paragraph. </p>
</body>
</html>Output:
As in the above program the code $( “h1:first-child” ).css( “background-color”, “red” ); is used to select the first child of its parent element and display in some style as background color red. Father the code $( “div p:first-child” ).addClass( “s1” ); is used to select the first p element under the each div matched and apply some style to it which is specify in the “s1” style class as it is apply by using the addClass( ) method. So, the first child of the h1 element and first child of p element under the div element is selected and that’s why they are displaying in some style.
Conclusion
The jQuery:first-child selector is a built-in selector in jQuery, which is used to selects one or more elements that are the first child of its parent. The jQuery :first-child selector is equivalent to :nth-child(1).
Recommended Articles
This is a guide to jQuery first child. Here we also discuss the introduction to jQuery first child along with different examples and its code implementation. You may also have a look at the following articles to learn more –
