What does symbol tilde (~) mean in CSS

I want to know what does (~) mean in css.

#img1:hover ~ #img2 {
    opacity: 0;
}

In visual studio, i get 'unexpected character sequence' error when i use this symbol. what is the actual meaning of this in CSS. what does it do?

http://www.w3.org/TR/selectors/

> 8.3.2. General sibling combinator > > The general sibling combinator is made of the "tilde" (U+007E, ~) > character that separates two sequences of simple selectors. The > elements represented by the two sequences share the same parent in the > document tree and the element represented by the first sequence > precedes (not necessarily immediately) the element represented by the > second one.

example

h1 ~ pre

matches that <pre> here:

<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>

There is also + selector, for adjacent sibling combinator: with h1 + pre the <pre> tag would have to be right after <h1>

It applies the style to all elements matching the second selector if they appear after the elements matching the first selector. For example, given an HTML snippet and CSS rule:

<p>Line one</p>
<hr />
<p>Line two</p>
<p>Line three</p>

hr ~ p {
    font-weight: bold;
}

only <p>Line two</p> and <p>Line three</p> will appear bold. In your example, I think Visual Studio is having a problem interpreting the :hover modifier, since it isn't really an element. If you remove it from the rule, it may work correctly.