What is the usefulness of the til operator in CSS?

Question

When reading some codes I see that it is common to use the tilde (~) in the selector setting. Ex.:

.effeckt-show.effeckt-modal-wrap ~ .effeckt-modal-overlay { ... }

Code taken from Effeckt.css.

Answer 1

Would be the "general brother".

It looks like the adjacent brother operator (+), differing at the point that the element being selected need not immediately succeed the first, but anywhere after.

For example:

.first {
  color: green;
}

div.first+div {
  color: pink;
}

div.first~p {
  color: red;
}

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

Answer 2

There are 2 conditions of use of ~

1. Select all elements with an attribute containing a certain value:

[attribute~=value]

For example, [title~=flower], to select elements with the attribute title containing flower.

2. Select every element that is preceded by another:

element1~element2

For example, p~ul selects every element ul which is preceded by a p.

---

In your question, it’s the second case. He’s selecting every element .effeckt-modal-overlay which is preceded by the .effeckt-show.effeckt-modal-wrap

Source: W3schools CSS Selectors.

Answer 3

According to the W3, for translation of the Maujor:

14.4. Brother combination element in general

The sibling combination element in general consists of two single selectors separated by a sign of "tilde" (~). This selector matches occurrences of the second simple selector element that are preceded by the first simple 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 an element pre following an element h1. 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.