CSS Selector * and ~

The following selector:

div * p

represents a p element that is a grandchild or later descendant of a div element. Note the whitespace on either side of the "*" is not part of the universal selector; the whitespace is a combinator indicating that the div must be the ancestor of some element, and that that element must be an ancestor of the p.

General sibling combinator ~ 

The general sibling combinator is made of the "tilde" (U+007E, ~) character that separates two sequences of simple selectors. The elements represented by the two sequences share the same parent in the document tree and the element represented by the first sequence precedes (not necessarily immediately) the element represented by the second one

So 

elements1 ~ elements2

it picks all elements in DOM where elements 2 are preceded by elements1

<div class="home">
  <span>blah</span>         <!-- [Not Selected] -->
  <p class="red">first</p>  <!-- [Not Selected] -->                               <p class="red">second</p> <!-- [Selected] -->                                   <p class="red">third</p>  <!-- [Selected] -->                                   <p class="red">fourth</p> <!-- [Selected] --></div>

/* 
 * Select all but the first .red child of .home,
 * 
 */
.home > .red ~ .red {
    //Some thing intelligent
}