De ~
fato, o seletor é o combinador geral de irmãos (renomeado para combinador de irmãos subsequentes nos seletores nível 4 ):
O combinador geral de irmãos é composto pelo caractere "til" (U + 007E, ~) que separa duas seqüências de seletores simples. Os elementos representados pelas duas sequências compartilham o mesmo pai na árvore de documentos e o elemento representado pela primeira sequência precede (não necessariamente imediatamente) o elemento representado pela segunda.
Considere o seguinte exemplo:
.a ~ .b {
background-color: powderblue;
}
<ul>
<li class="b">1st</li>
<li class="a">2nd</li>
<li>3rd</li>
<li class="b">4th</li>
<li class="b">5th</li>
</ul>
.a ~ .b
corresponde ao quarto e quinto item da lista porque:
- São
.b
elementos
- São irmãos de
.a
- Aparecer depois
.a
em ordem de origem HTML.
Da mesma forma, .check:checked ~ .content
corresponde a todos os .content
elementos que são irmãos .check:checked
e aparecem depois dele.