jQuery element ~ siblings Selector

Last Updated : 11 Jul, 2025

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

Syntax:

("element ~ siblings")

Parameter: It contains two parameters as mentioned above and described below:

element: It is a required parameter and is used for any valid jQuery selector.
siblings: It is a required parameter and is used for specifying the siblings of the element parameter.

Example 1:

HTML

<!DOCTYPE html> <html> <head> <title> jQuery element ~ siblings Selector </title> </head> <body style="text-align:center;"> <h1 style="color:green;"> GeeksforGeeks </h1> <h2>jQuery element ~ siblings Selector</h2> <p>Geeks1</p> <div> <p>Geek2</p> <p>Geeks3</p> </div> <p>Geek4</p> <p>Geeks5</p> <div> <p>Geek6</p> </div> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">  </script> <script>  $(document).ready(function () {  $("div ~ p").css("background-color", "green");  });  </script> </body> </html>

Output:

Example 2:

HTML

<!DOCTYPE html> <html> <head> <title> jQuery element ~ siblings Selector </title> </head> <body style="text-align:center;"> <h1 style="color:green;"> GeeksforGeeks </h1> <h2>jQuery element ~ siblings Selector</h2> <p>Geeks1</p> <div> <p>Geek2</p> <p>Geeks3</p> </div> <p>Geek4</p> <p>Geeks5</p> <div> <p>Geek6</p> </div> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">  </script> <script>  $(document).ready(function () {  $("p ~ div").css("border", "2px solid red");  });  </script> </body> </html>