Open In App

jQuery element ~ siblings Selector

Improve
Improve
Like Article
Like
Save
Share
Report

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=
    </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:



Last Updated : 06 Jul, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads