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
実行結果
ブラウザでの表示孫の段落も含めて、.box の中の p がすべて赤くなります
03
解説
A B のようにセレクタを半角スペースで区切ると、A の中に含まれるすべての B が対象になります。これを「子孫セレクタ」と呼びます。
直接の子どもだけでなく、孫やひ孫など、どれだけ深い階層にあっても当てはまります。上の例では、.box の直下にある p だけでなく、さらに div の中に入っている「孫の段落」も赤くなっています。
親のクラスで範囲を限定できるため、.news h2 のように「このセクションの中の見出しだけ」を指定するときによく使います。
04
応用例・注意点
関係を表すセレクタ（結合子）
| 書き方 | 説明 |
|---|---|
A B | 子孫：A の中にある B すべて（孫以降も含む） |
A > B | 子：A の直下にある B だけ |
A + B | 隣接兄弟：A のすぐ次にある B（1つだけ） |
A ~ B | 一般兄弟：A より後ろにある兄弟の B すべて |
セクションの中のリンクだけ色を変える
親のクラスで範囲を限定すると、ほかの場所のリンクに影響しません。
CSS
1.footer a {
2 color: #ccc;
3}
注意点
- 01階層を深くつなげすぎる（.main .content .box ul li a など）と、詳細度が上がり、HTMLの構造を変えたときに効かなくなります。2〜3段程度にとどめます。
- 02孫要素まで効いてほしくない場合は、子セレクタ（A > B）を使います。
- 03color や font-size などは継承されるため、セレクタが直接当たっていない要素の文字にも影響することがあります（「継承」の項目を参照）。