What does symbol tilde (~) mean in CSS

css tilde
Monie corleone picture Monie corleone · Mar 18, 2013 · Viewed 36.2k times · Source

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?

Answer

MarcinJuraszek picture MarcinJuraszek · Mar 18, 2013

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>

Related questions

How to horizontally center a <div>

How can I horizontally center a <div> within another <div> using CSS? <div id="outer"> <div id="inner">Foo foo</div> </div>

Read More
How do I vertically center text with CSS?

I have a <div> element which contains text and I want to align the contents of this <div> vertically center. Here is my <div> style: #box { height: 170px; width: 270px; background: #000; font-size: 48px; color: #…

Read More
How to align a <div> to the middle (horizontally/width) of the page

I have a div tag with width set to 800 pixels. When the browser width is greater than 800 pixels, it shouldn't stretch the div, but it should bring it to the middle of the page.

Read More