What does the “~” (tilde/squiggle/twiddle) CSS selector imply?

The ~ selector is in actual fact the subsequent-sibling combinator (beforehand known as common sibling combinator till 2017):

The following-sibling combinator is product of the “tilde” (U+007E, ~)
character that separates two sequences of easy selectors. The
components represented by the 2 sequences share the identical dad or mum within the
doc tree and the factor represented by the primary sequence
precedes (not essentially instantly) the factor represented by the
second one.

Think about the next instance:

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

<ul>
  <li class="b">1st</li>
  <li class="a">2nd</li>
  <li>third</li>
  <li class="b">4th</li>
  <li class="b">fifth</li>
</ul>

.a ~ .b matches the 4th and fifth listing merchandise as a result of they:

• Are .b components
• Are siblings of .a
• Seem after .a in HTML supply order.

Likewise, .test:checked ~ .content material matches all .content material components which are siblings of .test:checked and seem after it.