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.


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


<!DOCTYPE html>
         p ~ .first {
         background-color: #b3d4fc;
      <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>


Example: tilde CSS selector

CSS Examples »

Comments and Discussions!

Load comments ↻

Copyright © 2024 www.includehelp.com. All rights reserved.