Child (>) combinator

Specifies an child relationship between selector elements.

CSS 2.1, Section 5.6



first>second { ... }



A CSS simple selector.


A CSS simple selector.

Standards information


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.


The following style rule matches only p elements that are immediate children of the body element.

<!DOCTYPE html>
      body > p {
         line-height: 1.3;
         color: red;
   <p>Lorem ipsum dolor sit amet</p>
      <p>Lorem ipsum dolor sit amet</p>
   <p>Lorem ipsum dolor sit amet</p>

In the image below, you can see that the second and third paragraphs are red because they are immediate children of the body element. The second paragraph is within a div element, so the red color style is not applied.

Three paragrahs that are styled using the child combinator