Home » CSS

What does the '~' (tilde/squiggle/twiddle) CSS selector mean?

CSS Tilde (~) Symbol: In this tutorial, we will learn about the '~' (tilde / squiggle / twiddle) CSS selector, how does it work? By Apurva Mathur Last updated : July 15, 2023

CSS Tilde (~) Symbol

The Symbol tilde (~) is a general-sibling selector, also known as Subsequent-sibling Combinator or squiggle or twiddle. It 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.

Syntax

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

Example

<!DOCTYPE html>
<html>
   <head>
      <style>
         p ~ .first {
         background-color: #b3d4fc;
         }
      </style>
   </head>
   <body>
      <p class="first">hello first</p>
      <p class="second">hello Second</p>
      <p>hello Third</p>
      <p class="first">hello Fourth</p>
      <p class="first">hello Fifth</p>
   </body>
</html>

Output

CSS Examples »

How do I wrap text in a pre tag?

CSS opacity only to background color, not the text on it?