title: What is the logic behind sibling selectors * + * and * ~ *?
body: <p>For this question I'm using the following markup:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;body&gt;
      &lt;p&gt;1&lt;/p&gt; &lt;!-- Paragraph 1 --&gt;
      &lt;p&gt;2&lt;/p&gt; &lt;!-- Paragraph 2 --&gt;
      &lt;p&gt;3&lt;/p&gt; &lt;!-- Paragraph 3 --&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>From the <a href="http://www.w3.org/TR/selectors/#selectors" rel="nofollow noreferrer">Selectors Level 3 specification</a>, the following selector rules apply:</p>
  
  <pre class="lang-none prettyprint-override"><code>*        any element
  E + F    an F element immediately preceded by an E element
  E ~ F    an F element preceded by an E element
  </code></pre>
  
  <p>Based on this, the following should occur:</p>
  
  <pre class="lang-css prettyprint-override"><code>body + * { } /* Selects nothing as no elements precede body */
  body ~ * { } /* As above. */
  p + *    { } /* Selects Paragraph 2 and Paragraph 3 as these are preceded by p */
  p ~ *    { } /* As above. */
  * + *    { } /* As above. */
  * ~ *    { } /* As above. */
  </code></pre>
  
  <p><strong>False!</strong></p>
  
  <p><code>* + *</code> and <code>* ~ *</code> are somehow able to select Paragraph 1 along with 2 and 3! Paragraph 1 isn't preceded by anything, so should be impossible to access:</p>
  
  <pre class="lang-css prettyprint-override"><code>body + * { background: #000; }
  body ~ * { background: #000; }
  p ~ *    { color: #f00; }
  p + *    { font-weight: bold; }
  * + *    { text-decoration: underline; }
  * ~ *    { font-style: italic; }
  </code></pre>
  
  <p>Result:</p>
  
  <p><img src="https://i.stack.imgur.com/vWNF6.png" alt="Result example; paragraph 2 and 3 are red and all paragraphs are italic and underlined"></p>
  
  <p>As you can see, paragraph 1 isn't preceded by the <code>body</code> or a phantom <code>p</code>, yet it is apparently preceded by something. It should have no custom styling applied to it at all, yet is somehow affected by those last two selectors. What is the logic behind this?</p>
  
  <p><a href="http://jsfiddle.net/JamesD/WM4mu/" rel="nofollow noreferrer">JSFiddle example</a>.</p>