Question

After reading W3C documentation on CSS3 selectors, I am still a little bit confused, what is the difference between E F and E ~ F selectors.

E   F   an F element descendant of an E element
E ~ F   an F element preceded by an E element

In my opinion they are absolutely the same.

Answer 1

E F

selects an Element F which is a child (descendant) of E. So you have a nested structure, where E is the parent (ancestor) of F.

<!-- E F will match: -->
<e>
  <f></f>
</e>

this is similar to E > F which will only match if F is a direct child of E (no other elements in between).

While

E ~ F

selects an Element F which is preceded by an element E. In this case, you have a non-nested structure and E and F are Siblings.

<!-- E ~ F will match: -->
<e></e>
<f></f>

which again is similar to E + F except that here, F must follow E directly (with no other Element in between).