Home >>jQuery Tutorial >jQuery element ~ siblings Selector

jQuery element ~ siblings Selector

jQuery element ~ siblings Selector

jQuery element ~ siblings selector in jQuery is used to selects all elements that are siblings of the specified element.

Syntax:
("element ~ siblings")

Parameter Values

Parameter Description
element It is a required parameter and used for any valid jQuery selector
siblings It is a required parameter and used to specifies the siblings of the element parameter
Here is an Example of jQuery element ~ siblings Selector:

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("div ~ p").css("background-color", "orange");
});
</script>
</head>
<body>
<h2>Hello Phptpoint !</h2>
<p>This is a p element (will not be selected).</p>
<div style="border:1px solid black;padding:10px;">This is a div element.</div>
<p>This is a p element.</p>
<p>This is another p element.</p>
<div style="border:1px solid black;padding:10px;">
<p>This is a p element inside a div element (will not be selected).</p></div>
<h2>This is First heading</h2>
<p>This is a p element.</p>
</body>
</html>

Output:

Hello Phptpoint !

This is a p element (will not be selected).

This is a div element.

This is a p element.

This is another p element.

This is a p element inside a div element (will not be selected).

This is First heading

This is a p element.