The Child Selector

Child selectors are a specific type of contextual (or descendant) selector. The target element must be a direct descendant, a child, of the parent tag. Unlike contextual selectors, there cannot be any tags between the ancestor and the descendant.

General Syntax for the Child Selector

parentTag > childTag { declarations... }
parentTag>childTag { declarations... }

This selector is not supported in Windows IE 6 or below.

Spaces before and after the ">" child selector operator are optional.

The following example illustrates the differences between descendant and child selectors.

Style sheet

p>em { color: red; }
p em { font-weight: bold; }

The first rule above specifies that an EM tag that is a child of a P tag will be red. The second rule is a descendant selector that states that any EM tag that is a descendant of a P tag will be rendered as bold font.

Markup

<p>
  The characters inside the EM tag are
  <em>red because EM is a child of the P tag</em>.
</p>
 
<p>
  In the following paragraph, the characters will not
  be red because EM is nested inside the SPAN tag, thus EM
  is not a child of P ... it is a descendant of P.
  EM is a child of the SPAN element.
</p>
 
<p>
  The characters inside the EM tag are
  <span>
    <em>not red in this case!</em>
  </span>
</p>

Rendered Example

The characters inside the EM tag are red because EM is a child of the P tag.

In the following paragraph, the characters will not be red because EM is nested inside the SPAN tag, thus EM is not a child of P ... it is a descendant of P. EM is a child of the SPAN element.

The characters inside the EM tag are not red in this case!

In the first paragraph, the EM tag is targeted because it is a direct descendant of the P tag; it is a child of the P tag. Since a child is also a descendant, the second rule applies, so the text is also rendered in boldface font.

Simply speaking, all rules that target an element will be applied to the element. The effects are cumulative.

In the last paragraph in the example, the p>em rule is not applied because the EM tag is a child of the SPAN tag, not the P tag. However, since it is a descendant of the P tag, the second rule does apply, so the font is bolded.

Advanced Selectors