Caution

お使いのブラウザはJavaScriptが無効になっております。
当サイトでは検索などの処理にJavaScriptを使用しています。
より快適にご利用頂くため、JavaScriptを有効にしたうえで当サイトを閲覧することをお勧めいたします。

CSS辞典

トップページ
CSS辞典
【CSSセレクタ】E > F

【CSSセレクタ】E > F

『>』を使用すると、指定された要素の直下の子要素のみに適用できます。

サンプルコード

div.hoge > div { color: red;} /* class名『hoge』を持つdiv要素の直下にいる要素のみに適用されます。 */
div { color: blue;}

ブラウザでの表示結果

div.hoge > div { color: red;} /* class名『hoge』を持つdiv要素の直下にいる要素のみに適用されます。 */
div { color: blue;}

<div class="hoge">
	<div>ここはclass名『hoge』を持つdiv要素の中のdiv要素です。</div>
	<div>
		<div>ここはclass名『hoge』を持つdiv要素の中のdiv要素の中のdiv要素です。『div.hoge』の直下にいないため、文字が赤色となりません。</div>
	</div>
</div>