CSS子供セレクタ「>」の使い方、子孫セレクタとの違い

CSSにおける「>」の意味

親要素A > 子要素 {
  プロパティ: 値;
}

子要素から指定した親要素が「親要素A」だったときのみを対象とするセレクタ。

子孫セレクタのときとは違うという注意が必要。子孫セレクタは孫要素まで考慮するので、親要素直下になくても(子要素でなくても)対象となる。

・参考
子供セレクタ - CSSの基本書式 - スタイルシート入門
子孫セレクタ - CSSの基本書式 - スタイルシート入門

コード

<div>
    <span>sample</span>
    
    <ul>
        <li>This is a <span>test</span></li>
    </ul>
</div>

div span{/*子孫セレクタ*/
    font-size:25px;
}

div > span{/*子供セレクタ*/
    color:#F00;
}

デモ

「子孫セレクタ」で指定された対象は"div"下すべての"span"タグを含むので、"span"タグで囲まれたところは文字の大きさが変わっている。

「子供セレクタ」で指定された対象は、"li"タグ内の"span"には適用されない。