This page is Ready to Use

Notice: The WebPlatform project has been discontinued when the Stewards partnership agreement ended in September 2015. This site has been frozen, and the assets we have created will remain.

child

Summary

Selects only the immediate child of a parent element.

Use a child combinator to select the direct children of a parent ancestor. Create a child combinator by placing a “greater-than sign” (>) between two simple selectors. For example “ol > li” will target every list item element that is a direct child of an ordered list element. It will not match any further than the child in the document tree. For instance, if there were an unordered list nested inside an ordered list the list items in the unordered list would not be matched.

Examples

The following rule defines the text color of list item elements which are direct children of an ordered list red.

ol li {color: red;}

View live example

Notes

Remarks

A child combinator is a “greater-than sign” (>) character that separates two simple selectors. Whitespace is not significant. A selector of the form “E>F” matches when element F is a direct descendant of element E. Note Requires Windows Internet Explorer 7 or later. Note Combinators are not supported in webpages that are displayed in the Microsoft Internet Explorer 5 document mode (also known as “Quirks” mode). To use attribute selectors, add a !DOCTYPE directive that specifies a standards-based document. For more information, see Defining Document Compatibility.

Syntax

first>second { ... }

Parameters

first
A CSS simple selector.
second
A CSS simple selector.

Standards information

Related specifications

CSS Level 2 Specification
W3C Recommendation

Attributions