❮❮ PREV NEXT ❯❯

SELECTORS - Last of type Child Selector

The Last of type Child Selector is used to select the elements, who are the last 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">
    		<p class = "para1"> First Paragraph </p>
    		<p class = "para2"> Second Paragraph </p>
    		<p class = "para3"> Third Paragraph </p>
    		<span> My Span </span>
    	</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:last-of-type').text("The last 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">
	<p class = "para1"> First Paragraph </p>
	<p class = "para2"> Second Paragraph </p>
	<p class = "para3"> Third Paragraph </p>
	<span> My Span </span>
</div>

Now, if you consider the DOM,

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

<span> My Span </span>

And the first, second and third 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 last element gets replaced with The last child of div element of p type got replaced.

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

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

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

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

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

❮❮ PREV NEXT ❯❯