SELECTORS - First Child Selector

The First Child Selector is used to select the elements, who are the first child of their parent.

Let us simplify with the below example.

Example :

<html>
  	<head>
    	<title> My First Programme </title>
  	</head>

  	<body>
    	<h1> JQuery </h1>
    	
    	<div class = "newClass">
    		<p class = "para1"> First Paragraph </p>
    		<p class = "para2"> Second Paragraph </p>
    		<p class = "para3"> Third Paragraph </p>
    	</div>	
    	
    	<button> Click me </button>

      	<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"> </script>
	  
      	<script>
      
			$('button').click( function() { 
            	$('p:first-child').text("The first child of div element got replaced")
            });
            
      	</script>      
  	</body>
</html>

Output :

So, if you see the above code. We can see that there are three <p> elements, those are inside a <div> element.

<div class = "newClass">
	<p class = "para1"> First Paragraph </p>
	<p class = "para2"> Second Paragraph </p>
	<p class = "para3"> Third Paragraph </p>
</div>

Now, if you consider the DOM,

The <div> element has three children of type <p>.

<p class = "para1"> First Paragraph </p>
<p class = "para2"> Second Paragraph </p>
<p class = "para3"> Third Paragraph </p>

And the first child of <div> element is,

<p class = "para1"> First Paragraph </p>

And on button click, the contents of first element gets replaced with The first child of div element got replaced.

And this happened with the :first-child element selector.

$('button').click( function() {
	$('p:first-child').text("The first child of div element got replaced")
});

The moment the button is clicked, JQuery statement gets triggered.

$('p:first-child').text("The first child of div element got replaced")

And the JQuery code locates the first child of <div> element and changes its contents.

Now let us take the next example, where we are taking a <span> as the first child of <div>.

Example :

<html>
  	<head>
    	<title> My First Programme </title>
  	</head>

  	<body>
    	<h1> JQuery </h1>
    	
    	<div class = "newClass">
    		<span> My Span </span>
    		<p class = "para1"> First Paragraph </p>
    		<p class = "para2"> Second Paragraph </p>
    		<p class = "para3"> Third Paragraph </p>
    	</div>	
    	
    	<button> Click me </button>

      	<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"> </script>
	  
      	<script>
      
			$('button').click( function() { 
            	$('p:first-child').text("The first child of div element got replaced")
            });
            
      	</script>      
  	</body>
</html>

Output :

Now, if you see the above code, nothing actually changed on Button click.

Let us take the DOM to understand it.

And right now, the first child of <div> is a <span> and not a <p>.

<div class = "newClass">
	<span> My Span </span>
	<p class = "para1"> First Paragraph </p>
	<p class = "para2"> Second Paragraph </p>
	<p class = "para3"> Third Paragraph </p>
</div>

And since, the JQuery statement,

$('p:first-child').text("The first child of div element got replaced")

Searches for the <p> element that is the first child, it does not get it. As <p> element is the second, third and fourth child of <div> element.

❮❮ PREV NEXT ❯❯