はじめに
「>」は子結合子（子コンビネータ）と呼ばれるものです。「>」の使い方で自分の理解が浅かったので、擬似クラス「:nth-child()」を用いて整理します。
「>」とは？
HTMLとCSSでは、>記号は（子孫ではなく）直接の子要素を選択するためのセレクタです。これは「子コンビネータ」とも呼ばれるらしいです。
簡易な例を挙げると、以下では、.parentクラスを持つ要素の直接の子要素である<p>タグにスタイルを適用します。
最初の<p>タグは.parentの直接の子要素であるため、赤色になりますが、2つ目の<p>タグは.parentの孫要素（直接の子要素ではない）であるため、赤色にはなりません。
See the Pen Untitled by kazui (@kazui38) on CodePen.
このように「>」は特定の親要素の直接の子要素にだけスタイルを適用したい場合に便利です。
「>」の使用場面
ここでは以下のような３カラムデザインと、以下のようなHTML構造をイメージしてください。
<div class="site-columns">
<div class="site-left">１</div>
<div class="site-center">２</div>
<div class="site-right">３</div>
</div>まずは横並びを表現するためにdisplay: flex;を当てます。
あくまで例なので、上記のサイトとサイズ感は異なりますが、左右のカラムを500pxで固定、中央のカラムを残りの幅で埋めるとします。
その際に、以下のように「>」をなしで設定すると動作しません。
やりたいことは、.site-columnsクラスを持つ要素と、その子要素に対するスタイル（今は横幅）を定義することですが、&:nth-child()セレクタは.site-columns自体の子要素ではなく、.site-columnsが何番目の子要素であるかを指定するもののため動作しません。
.site-columns {
display: flex;
&:nth-child(1) {
flex-shrink: 0;
flex-basis: 100px;
}
&:nth-child(2) {
flex-grow: 1;
}
&:nth-child(3) {
flex-shrink: 0;
flex-basis: 100px;
}
}.site-columns自体の子要素に対するスタイルを適用するためには、& > :nth-child()のように使用する必要があります。
See the Pen Untitled by kazui (@kazui38) on CodePen.
「& > *」の構文と動作
子コンビネータに触れたので、関連する部分について、以下のHTMLとCSSを例にメモ。
See the Pen Untitled by kazui (@kazui38) on CodePen.
「＆」の意味
これは「親セレクター」を指します。&は、書かれた場所に応じて、それを囲むセレクター（この場合は.flex）を指します。
「>」の意味
これは「子セレクター」で、親要素の直下にある子要素にのみスタイルを適用します。例えば、.flex > *（イコール 「& > *」）は、.flexの直下にあるすべての子要素に適用されます。
「*」の意味
これは「全セレクター」で、すべての要素を選択します。この場合、.flexクラスを持つ要素の直下にあるすべての子要素が対象になります。
まとめると、「& > *」は、「親セレクター（この場合は.flex）」の直下にあるすべての子要素に対して、flex-growとflex-basisのプロパティを適用するという指示になります。
