Caution

お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。

CSSプロパティ辞典

  1. トップページ
  2. CSSプロパティ辞典
  3. 【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>

対応ブラウザ
IE6 IE7 IE8 IE9 IE10 IE11 Safari Chrome Firefox Opera

iPhone Safari Android2系 標準ブラウザ Android4系 標準ブラウザ

記事の間違いや著作権の侵害等ございましたらお手数ですがまでご連絡頂ければ幸いです。

シェア
このエントリーをはてなブックマークに追加