What is the usefulness of the tilde operator in CSS?

Question:

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

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

Code taken from Effeckt.css .

Answer:

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 title attribute containing flower .

  1. Select every element that is preceded by another:
element1~element2

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


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

Source: W3Schools CSS Selectors .

Scroll to Top