What is the logic behind sibling selectors * + * and * ~ *?

Question

For this question I\'m using the following markup:

    
1
 
         


        

Answer 1

They are not applied to the first paragraph actually. To demonstrate this, let's change the stylesheet a bit:

* + *    { border-right: solid red }
* ~ *    { border-left: solid black; }

fiddle

They are both applied to the "body" element which is in fact preceded by "head".