Child selectors

A child selector is used to select an element that is a direct child of another element (parent). Child selectors will not select all descendants, only direct children.

For example, you may wish to target an <em> that is a direct child of a <div>, but not other <em> elements that are descendants of the <div>. A sample document could contain the following code:

<body>
<h1>Heading <em>text</em></h1>
<div>
This is some <em>text</em>
<p>This is a paragraph of <em>text</em></p>
</div>
</body>

The document tree (highlighting the <em> that is a child of the <div>) would be:

Document tree showing child selector

Using the following rule you can target any <em> element that is a child of the <div>. Other <em> elements that are descendants but not direct children of the <div> will not be targeted.

div > em { color: blue; }

OR

div>em { color: blue; }

Child selectors are not supported by Windows Internet Explorer 5, 5.5 and 6, but are supported by most other standards-compliant browsers.

Further information

Universal selectors »

Other Max Design articles and presentations
Associated with webstandardsgroup.org