子セレクタ（子共セレクタ）は、親要素の直接の子要素に適用されるセレクタです。このため、孫要素以下は対象になりません。
この子セレクタは、各単純セレクタ（クラスセレクタやIDセレクタ、タイプセレクタなど）を大なり（>）で区切って書きます。なお、大なり（>）前後の空白類文字は、あってもなくても構いませんが、可読性を良くするために前後に半角スペースを入れている場合が多いです。

対応ブラウザ

• 
• 
• 
• 
• 
• 
• 

子セレクタのサンプル

#main > p {
  color: #f00;
}

<div id="main">
<p>文字が赤くなります。</p>

<div class="section">
<p>孫に当たるため適用されません。</p>
</div>

<p>文字が赤くなります。</p>
<!-- / #main --></div>

この例の場合、div class="section"内のp要素は#mainからは孫に当たるため適用されません。
最後のp要素も直接の子要素になるため、スタイルが適用されます。

実際のブラウザでは以下のように表示されます。

サンプルのブラウザ上の表示

文字が赤くなります。

孫に当たるため適用されません。

文字が赤くなります。

IE6で見てもらうと全て黒字で表示されているのが分かるように、この子セレクタは残念ながらIE6は対応していませんが、対応していない事を利用してハックのように使う事も可能です。

div.section {
  height: 50px;
  padding: 10px;
  border: 1px solid #ccc;
}

#main > div.section {
  height: auto;
  min-height: 50px;
}

まず最初にIE6用に指定をしてから、子セレクタを使って他のブラウザ向けの指定を行います。
この例の場合、IE6はmin-heightプロパティに対応しておらず、heightプロパティの指定をしても、内容量に合わせて高さが増えてしまうバグが有るためそれを利用しています。