What is the usefulness of the tilde operator in CSS?


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

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

Code removed from Effeckt.css .

asked by anonymous 20.02.2014 / 19:17

3 answers


There are 2 conditions of use of ~

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


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

20.02.2014 / 19:24

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>


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

div.first ~ p {
20.02.2014 / 19:23

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.




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.

20.02.2014 / 19:24