css3 - What does the "~" (tilde/squiggle/twiddle) CSS selector mean?

Searching for the ~ character isn't easy. I was looking over some CSS and found this

.check:checked ~ .content {
}

What does it mean?

Answer

The ~ selector is in fact the General sibling combinator (renamed to Subsequent-sibling combinator in selectors Level 4):

The general sibling combinator 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 and the element represented by the first sequence
precedes (not necessarily immediately) the element represented by the
second one.

Consider the following example:

.a ~ .b {
  background-color: powderblue;
}

  
1st
  
2nd

  
3rd
  
4th
  
5th

.a ~ .b matches the 4th and 5th list item because they:

• Are .b elements


• Are siblings of .a


• Appear after .a in HTML source order.

Likewise, .check:checked ~ .content matches all .content elements that are siblings of .check:checked and appear after it.