What does symbol tilde (~) denotes in CSS ?

In CSS, the symbol tilde(~) is know as Subsequent-sibling Combinator (also known as tilde or squiggle or twiddle or general-sibling selector). As the name suggests it is made of the “tilde” (U+007E, ~) character that separates two sequences of simple selectors. The elements represented by the two sequences share the same parent in the document tree. It is used to select all the second sequences which are preceded by the first sequence (not necessarily immediately) or in simple words selects all elements that are siblings of a specified element.

Syntax:

first-sequence ~ second-sequence {
    /* property:value; */
}

Example:



filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>CSS ~ Selector</title>
      
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
    <style>
        h1{
            color:green;
            text-align: center;
        }
        hr ~ p {
            text-align: justify;
            background-color: powderblue;
            font-size: 130%;
        }
    </style>
</head>
  
<body>
    <div class="container">
  
        <h1>GeeksforGeeks</h1>
          
  
        <p>
            Sudo Placement is back to help you this placement
            season. Prepare for the Recruitment drive of 
            product-based companies like Microsoft, Amazon,
            Adobe, etc with our free online placement preparation
            course. The course focuses on various MCQ's & Coding
            question likely to be asked in the interviews & make
            your upcoming placement season efficient and successful.
        </p>
          
        <hr/>
          
        <p>
            Sudo Placement is back to help you this placement
            season. Prepare for the Recruitment drive of 
            product-based companies like Microsoft, Amazon,
            Adobe, etc with our free online placement preparation
            course. The course focuses on various MCQ's & Coding
            question likely to be asked in the interviews & make
            your upcoming placement season efficient and successful.
        </p>
    </div>
</body>
  
</html>

chevron_right


Output:



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.



Improved By : shubhamr238