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

Question

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

.check:checked ~ .content {
}

What does

Answer 1

Good to also check the other combinators in the family and to get back to what is this specific one.

• ul li
• ul > li
• ul + ul
• ul ~ ul

Example checklist:

• ul li - Looking inside - Selects all the li elements placed (anywhere) inside the ul; Descendant selector
• ul > li - Looking inside - Selects only the direct li elements of ul; i.e. it will only select direct children li of ul; Child Selector or Child combinator selector
• ul + ul - Looking outside - Selects the ul immediately following the ul; It is not looking inside, but looking outside for the immediately following element; Adjacent Sibling Selector
• ul ~ ul - Looking outside - Selects all the ul which follows the ul doesn't matter where it is, but both ul should be having the same parent; General Sibling Selector

---

The one we are looking at here is General Sibling Selector