CSS ・ CSSの記法
A > B
子セレクタ（直下の子要素だけ）
セレクタを「>」で区切ると、「A の直下にある子要素の B」だけを指定できます。孫やそれより深い要素は対象になりません。
01
サンプルコード
HTML
1<div class="box">
2 <p>子の段落</p>
3 <div class="inner">
4 <p>孫の段落（div の中）</p>
5 </div>
6 <p>子の段落</p>
7</div>
CSS
1.inner {
2 margin-left: 24px;
3 padding-left: 12px;
4 border-left: 2px solid #ddd;
5}
6/* .box の直下の p だけ（孫の p は含まない） */
7.box > p {
8 color: #c0392b;
9 font-weight: bold;
10}
02
実行結果
ブラウザでの表示直下の「子の段落」だけが赤くなり、「孫の段落」は元の色のままです
03
解説
A > B と書くと、A のすぐ下の階層にある子要素の B だけが対象になります。これを「子セレクタ」と呼びます。
上の例では、.box の直下にある2つの「子の段落」だけが赤くなり、div の中の「孫の段落」は元の色のままです。子孫セレクタ（.box p）との違いを見比べてみましょう。
ただし color のように親から子へ受け継がれる（継承される）プロパティには注意が必要です。セレクタが当たるのは子要素だけでも、孫要素がその子要素の中にあれば、子の色がそのまま孫にも受け継がれて同じ色に見えます。上の例で孫の段落が元の色のままなのは、孫の段落が子の p の中ではなく、別の div の中にあるためです（下の応用例も参照）。
04
応用例・注意点
関係を表すセレクタ（結合子）
| 書き方 | 説明 |
|---|---|
A B | 子孫：A の中にある B すべて |
A > B | 子：A の直下にある B だけ |
A + B | 隣接兄弟：A のすぐ次の B |
A ~ B | 一般兄弟：A より後ろの兄弟の B すべて |
継承によって孫も同じ色になる例
li の中に孫の li がある場合、セレクタが当たるのは直下の li だけですが、color は継承されるため孫の li も赤く表示されます。孫を元の色に戻したいときは、孫の側に色を指定します。
HTML
1<ul class="menu">
2 <li>カフェラテ
3 <ul>
4 <li>ホット</li> <!-- 親の li から赤を受け継ぐ -->
5 </ul>
6 </li>
7</ul>
CSS
1.menu > li {
2 color: #c0392b;
3}
4/* 孫の li は元の色に戻す */
5.menu > li li {
6 color: #201f1d;
7}
カードの直下の要素に余白をそろえる
子セレクタとユニバーサルセレクタ（*）を組み合わせると、直下の子すべてを指定できます。
CSS
1.card > * {
2 margin: 0 0 8px;
3}
4.card > *:last-child {
5 margin-bottom: 0;
6}
注意点
- 01> の前後の空白はあってもなくても同じ意味ですが、読みやすさのため空白を入れて書くのが一般的です。
- 02HTMLの構造（入れ子の段数）を変えると効かなくなるので、構造と合わせて管理します。