Caution

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

CSS辞典

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

【CSSセレクタ】E > F

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

サンプルコード

style.css

/* .hogeの直下のdivのみに適用（孫要素は対象外） */
div.hoge > div { color: red;}
div { color: blue;}

/* ulの直接の子であるliのみに適用（ネストしたulのliは対象外） */
ul > li { list-style-type: disc;}

/* navの直下のaのみ（入れ子のaは対象外） */
nav > a { font-weight: bold;}

/* フォームの直接の子であるinputのみ（divで囲まれたinputは対象外） */
form > input { border: 1px solid #ccc;}

/* 子結合子（>）と子孫結合子（スペース）の違い */
.parent > .child { color: red;} /* 直接の子のみ */
.parent .child { 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>