Skip to content
Related Articles

Related Articles

jQuery element ~ siblings Selector

Improve Article
Save Article
  • Last Updated : 14 Nov, 2022
Improve Article
Save Article

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 required parameter and used for any valid jQuery selector.
  • siblings: It is required parameter and 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=
  </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=
  </script>
  <script>
    $(document).ready(function () {
      $("p ~ div").css("border", "2px solid red");
    });
  </script>
</body>
</html>


Output:

 


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!