Related Articles

Related Articles

What does symbol tilde (~) denotes in CSS ?
  • Last Updated : 17 Oct, 2019

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
Recommended Articles
Page :