CSSの子セレクタ「＞」の意味について

公開日：2014/3/20 更新日：2025/4/14

GumbyのCSSを見ていて子セレクタ「＞」の使い方を改めて学んだのでメモ。

子セレクタ（直下セレクタ）

親セレクタの中にある要素にのみスタイルを適用させる。

<div>
    <p>テキスト</p>
</div>

というHTMLに

div > p {
 color:red;
}

というCSS書くとdivの中のpタグの色は赤になる。

これだけだと普通に

div p {
 color:red;
}

と書けばいいようだが、別名の「直下セレクタ」の文字通り、親の直下にある要素にしか適用したくない場合に役立つ。

HTMLがこのような場合（作法的におかしいが…）

<div>
    <p>適用されるテキスト</p>
    <a>
        <p>適用されないテキスト</p>
    </a>
</div>

divの直下にある最初のpタグには適用されるが、二つ目のpタグはdivとの間にaタグが入っているため適用されない。

子セレクタを使わない通常の書き方では両方のpタグに適用される。

久しぶりにCSSを書いているので、ところどころ忘れている点があるため一つづつ思い出していきたいです。