Ao ler alguns códigos vejo que é comum a utilização do til (~
) na definição do seletor. Ex.:
.effeckt-show.effeckt-modal-wrap ~ .effeckt-modal-overlay { ... }
Código retirado do Effeckt.css.
Ao ler alguns códigos vejo que é comum a utilização do til (~
) na definição do seletor. Ex.:
.effeckt-show.effeckt-modal-wrap ~ .effeckt-modal-overlay { ... }
Código retirado do Effeckt.css.
Existem 2 condições de uso do ~
[attribute~=value]
Por exemplo, [title~=flower]
, para selecionar elementos com o atributo title
contendo flower
.
element1~element2
Por exemplo, p~ul
seleciona todo elemento ul
que é precedido por um elemento p
.
Na sua pergunta, é o segundo caso.
Ele está selecionando todo elemento .effeckt-modal-overlay
que é precedido pelo elemento .effeckt-show.effeckt-modal-wrap
Fonte: W3Schools CSS Selectors.
Seria o "irmão geral".
É parecido com o operador de irmão adjacente (+
), diferindo no ponto de que o elemento sendo selecionado não precisa suceder imediatamente o primeiro, mas em qualquer lugar depois.
Por exemplo:
.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>
Segundo o W3, pela tradução do Maujor:
14.4. Elemento de combinação irmão em geral
O elemento de combinação irmão em geral consiste de dois seletores simples separados por um sinal de "til" (
~
). Este seletor casa ocorrências do segundo elemento seletor simples que sejam precedidos pelo primeiro elemento seletor simples. Ambos os elementos devem ter o mesmo elemento pai, mas o segundo elemento não precisa seguir-se imediatamente após o primeiro.Exemplo:
h1 ~ pre
representa um elemento
pre
seguindo um elementoh1
. Essa é uma descrição correta e válida, mas parcial, de:<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>
Quando os dois seletores estão sob o mesmo elemento pai, o estilo em questão se aplica a ambos, mesmo que haja elementos no meio.