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

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を書いているので、ところどころ忘れている点があるため一つづつ思い出していきたいです。