What is the usefulness of the tilde operator in CSS?

There are 2 conditions of use of ~

[attribute~=value] 
ex: [title~=flower] 
Seleciona todos os elementos com um atributo contendo "flower"

or

element1~element2 
ex: p~ul    seleciona todo elemento "ul" q é precedido por um elemento "p"

In your question is the second case. it is selecting every .effeckt-modal-overlay element that is preceded by the .effeckt-show.effeckt-modal-wrap element

source: link

It would be the "brother-in-law."

It is similar to the adjacent (+) sibling operator, differing at the point that the element being selected does not need to immediately succeed the first, but anywhere later.

For example, see this fiddle .

<div class="first">First</div>
<div>Com estilo - Selecionado pelo "+"</div>
<div>Div sem estilo</div>
<p> Com estilo, selecionado pelo "~" </p>

CSS:

.first {
    color: green;
}
div.first + div {
   color: pink;
}

div.first ~ p {
   color:red
}

According to W3 , by translation of Maujor :

  

8.3.2. Element of brother combination in general

     

The brother combining element usually consists of two simple selectors separated by a "tilde" sign (~). This selector matches occurrences of the second single selector element that are preceded by the first single selector element. Both elements must have the same parent element, but the second element need not follow immediately after the first.

     

Example:

     

h1 ~ pre

     

represents a pre element following a h1 element. This is a correct and valid, but partial, description of:

     

<h1>Definition of the function a</h1>

     

<p>Function a(x) has to be applied to all figures in the table.</p>

     

<pre>function a(x) = 12x/13.5</pre>

When the two selectors are under the same parent element, the style in question applies to both, even if there are elements in the middle.