Windows apps
Collapse the table of content
Expand the table of content
Information
The topic you requested is included in another documentation set. For convenience, it's displayed below. Choose Switch to see the topic in its original location.

Child (>) combinator

Specifies an child relationship between selector elements.

CSS 2.1, Section 5.6

 

Syntax

first>second { ... }

Parameters

first

A CSS simple selector.

second

A CSS simple selector.

Standards information

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.
 

Examples

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


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


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

 

 

Show:
© 2017 Microsoft