Export (0) Print
Expand All
0 out of 5 rated this helpful - Rate this topic

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

 

 

Did you find this helpful?
(1500 characters remaining)
Thank you for your feedback
Show:
© 2014 Microsoft. All rights reserved.