ADVERTISEMENT
ADVERTISEMENT

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

Learn about the '~' (tilde/squiggle/twiddle) CSS selector, how does it work?
Submitted by Apurva Mathur, on June 03, 2022

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:

Example: tilde CSS selector


CSS Tutorial & Examples »


ADVERTISEMENT
ADVERTISEMENT


Comments and Discussions!



ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT

Languages: » C » C++ » C++ STL » Java » Data Structure » C#.Net » Android » Kotlin » SQL
Web Technologies: » PHP » Python » JavaScript » CSS » Ajax » Node.js » Web programming/HTML
Solved programs: » C » C++ » DS » Java » C#
Aptitude que. & ans.: » C » C++ » Java » DBMS
Interview que. & ans.: » C » Embedded C » Java » SEO » HR
CS Subjects: » CS Basics » O.S. » Networks » DBMS » Embedded Systems » Cloud Computing
» Machine learning » CS Organizations » Linux » DOS
More: » Articles » Puzzles » News/Updates

© https://www.includehelp.com some rights reserved.