❮❮ PREV NEXT ❯❯

SELECTORS - First of type Child Selector

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

Sounds complex?

Let us simplify with the below example.

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://cdnjs.cloudflare.com/ajax/libs/JQUERY/3.3.1/jquery.min.js"> </script>
	  
      	<script>
      
			$('button').click( function() { 
            	$('p:first-of-type').text("The first child of div element of p type got replaced")
            });
            
      	</script>      
  	</body>
</html>

Output :

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

<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>

Now, if you consider the DOM,

The <div> element has four children, the first child is a <span> type,

<span> My Span </span>

And the second, third and fourth is of type <p>.

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

Now, if you see the above output, on button click, the contents of first element gets replaced with The first child of div element of p type got replaced.

And this happened with the :first-of-type element selector.

$('button').click( function() {
	$('p:first-of-type').text("The first child of div element of p type 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 of <p> type and changes its contents.

❮❮ PREV NEXT ❯❯