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

style.css

/* Apply only to direct child divs of .hoge (grandchildren are excluded) */
div.hoge > div { color: red;}
div { color: blue;}

/* Apply only to li elements that are direct children of ul (nested li excluded) */
ul > li { list-style-type: disc;}

/* Apply only to a elements directly inside nav */
nav > a { font-weight: bold;}

/* Apply only to input elements that are direct children of form */
form > input { border: 1px solid #ccc;}

/* Difference between child combinator (>) and descendant combinator (space) */
.parent > .child { color: red;} /* direct children only */
.parent .child { color: blue;} /* all descendants */

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>