Caution

JavaScript is disabled in your browser.
This site uses JavaScript for features such as search.
For the best experience, please enable JavaScript before browsing this site.

CSS Dictionary

Home
CSS Dictionary
[CSS Selector] E > F

[CSS Selector] E > F

Using '>' applies styles only to direct child elements of the specified element.

Sample Code

div.hoge > div { color: red;} /* Applies only to elements that are direct children of a div element with the class name 'hoge'. */
div { color: blue;}

Browser Display Result

div.hoge > div { color: red;} /* Applies only to elements that are direct children of a div element with the class name 'hoge'. */
div { color: blue;}

<div class="hoge">
	<div>This is a div element inside a div element with the class name 'hoge'.</div>
	<div>
		<div>This is a div element inside a div element inside a div element with the class name 'hoge'. Since it is not a direct child of 'div.hoge', the text color does not become red.</div>
	</div>
</div>