title: CSS ~ selector vs + selector
body: <p><a href="https://www.w3schools.com/cssref/css_selectors.asp" rel="nofollow noreferrer">According to W3Schools</a>:</p>
  
  <blockquote>
    <ul>
    <li><code>div + p {}</code> selects all <code>&lt;p&gt;</code> elements that are placed immediately after <code>&lt;div&gt;</code> elements<br /><br /></li>
    <li><code>p ~ div</code> selects every <code>&lt;div&gt;</code> element that is preceded by a <code>&lt;p&gt;</code> element</li>
    </ul>
  </blockquote>
  
  <p>So what's the difference?</p>
  
  <p>I am trying to make a <code>&lt;div id="bar"&gt;</code> appear when <code>&lt;div id="foo"&gt;</code> is on hover, and in my CSS both <code>#foo:hover ~ #bar</code> and <code>#foo:hover + #bar</code> seem to do the exact same thing.</p>
  
  <p><a href="https://jsfiddle.net/wcx9z75r/" rel="nofollow noreferrer">Fiddle with <code>~</code> selector</a></p>
  
  <p><a href="https://jsfiddle.net/nLkp1h4b/" rel="nofollow noreferrer">Fiddle with <code>+</code> selector</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#foo,
  #bar {
    height: 200px;
    width: 200px;
  }
  
  #foo {
    background-color: indianred;
    cursor: pointer;
  }
  
  #bar {
    visibility: hidden;
    background-color: steelblue;
  }
  
  /* Example 1 */
  #foo:hover ~ #bar {
    visibility: visible;
  }
  /* Example 2 */
  #foo:hover + #bar {
    visibility: visible;
  }
  /* Both example 1 &amp; 2 do the same thing */</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="foo"&gt;
  
  &lt;/div&gt;
  
  &lt;div id="bar"&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>