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.

HTML
Copy 

<!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: