❮❮ PREV NEXT ❯❯

SELECTORS - :has(selector) Selector

The ':has(selector) Selector' is used to select the elements, that matches the selector in ':has(selector)'.

Let us simplify with the below example.

Example :

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

  	<body>
    	<h1> JQuery </h1>
    	
    	<div class = "newClass1">
    		<p class = "para1"> First Paragraph </p>
    	</div>
    	
    	<div class = "newClass2">
    		<p class = "newPara"> Next Paragraph </p>
    	</div>
    	
    	<div class = "newClass3">
    		<span class = "nextPara"> New Next Paragraph </span>
    	</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() { 
            	$('div:has(p)').text("The content of div that has a p child got changed")
            });
            
      	</script>      
  	</body>
</html>

Output :

So, if you see the above code. We can see that there are three <div> elements, where the first two <div> elements has a <p> element in it.

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

<div class = "newClass2">
	<p class = "newPara"> Next Paragraph </p>
</div>

And the third <div> element has a <span> element inside it.

<div class = "newClass3">
	<span class = "nextPara"> New Next Paragraph </span>
</div>

And we only want to change the contents of the <div> elements that has a <p> element in it.

And this happened with the 'div:has(p)' element selector.

$('button').click( function() {
	$('div:has(p)').text("The content of div that has a p child got changed")
});

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

$('div:has(p)').text("The content of div that has a p child got changed")

And the JQuery code locates the <div> elements with <p> element in it and changes its content.

❮❮ PREV NEXT ❯❯