~ used

There's a really great answer on StackOverflow to explain the usage of the tilde sign in CSS

http://stackoverflow.com/questions/10782054/what-does-the-tilde-squiggle-twiddle-css-selector-mean

Long story short, it's a general sibling combinator which means that for example if you do .a ~ .b { color: yellow; }

And in your HTML you have

<ul>
  <li class="a">1st</li>
  <li class="c">2nd</li>
  <li class="d">3rd</li>
  <li class="b">4th</li>
  <li class="b">5th</li>
</ul>

By doing the ~ selector between the .a class and the .b class, you're saying hey CSS make the text-color yellow IF, the element has a class of '.b' and is a SIBLING of class '.a', AND this element appears AFTER the elements with a class '.a'

So CSS will say, sure bud! And it will make these lines yellow:

<li class="b">4th</li>
<li class="b">5th</li>

I took the examples more or less from Salman's answer on StackOverflow and tried to adapt to them to another situation, but the context is the same!