What does symbol tilde (~) denotes in CSS ?

Last Updated : 01 Feb, 2023

In CSS, the symbol tilde(~) is known 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:

html

<!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=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <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>