Question

I want to know what the ~ is used for in CSS.

e.g.

#confirmPage:target ~ #navigation #confirm-link,

Answer 1

It means “general sibling”. The selector:

a ~ b

matches every element matching b that comes after an element matching a, within the same parent element. For example, take this structure:

<p>
    <span>Span 1</span>
    <strong>Strong emphasis</strong>
    <span>Span 2</span>
</p>

The selector p span ~ span will match the second <span>.