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